all files / rich-text-editor/renderer/ audio-module.js

92.32% Statements 769/833
86.69% Branches 586/676
94.81% Functions 73/77
92.39% Lines 765/828
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290   3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208× 3208×   3210×   3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209× 3209×   3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3207× 3205×     3209× 3208×     3230× 3230×   3230× 3230× 3230× 3230× 3230× 3230× 3203×     263× 324× 324× 35× 21×     14×         114×     111×         35×       35×             825×   824×   11×   11× 11×         340×               1070× 1070× 1070× 1070× 1070× 1070× 1070× 1070×   1070× 1070× 1070×   1070× 222× 222× 1104× 13×       1070×   184× 184× 114×   70× 35×     1070×   1052× 1052× 1052×   1070×   1070× 184× 184× 184×         184×       184×                     1070× 1070×   12×   12×     177× 142× 71× 54×         17×           71×           177×       1070× 11×     11× 11×                                       86×     30× 23×                                   766× 31×     30× 19×       766× 31× 31×     1718× 1718×     1718× 48×   1718×                 1718× 1670×   1666×     1718×     428× 428× 423×                                     808×       808× 808× 808× 808× 695×   808× 24×     24×   24×   784× 674× 674× 39× 39× 39×   39×     635×       6508×   271×     6237×     162× 162×   123×   39×     39×       39×     39×                         39× 39× 39× 39× 39×     39× 39× 39× 39× 39×         39× 39× 39× 39×   39× 39×                   39×       636×         49× 49× 44× 44× 44× 44×             3237× 48× 48× 48×   3237× 48× 48× 48×   3237× 49× 48× 48×   49× 49× 48×   49×     53× 53×   48× 48× 48× 48× 48× 48× 48× 48×                                       30×           30× 30× 14× 14×     30× 30×     48× 48× 48×   48× 48× 48× 48×   48× 48× 48×     42×   48× 48× 48× 48×   48× 48×               48× 48× 48×       48× 48×   48× 48×   18× 18×     17×       48× 48× 48× 48× 48× 48×     17× 17× 17× 17×     31× 31×   48× 48× 48× 48× 48×     48× 48×     48× 48× 48× 48× 48× 48× 48× 48× 48× 48×     48× 48× 48× 48×           13× 13× 13× 13× 12×     12× 12× 12×                           16×                                                     48× 48× 48× 48×   12× 12×               11×   10× 10× 10× 10× 10×                         12×                 23×   19× 19×   17× 17× 17×   17×                   17× 17×   41× 41× 38× 38× 38× 21× 21× 21× 20×     19× 19× 19× 19×                 19× 19× 19×   18×                               18× 18× 18× 18× 18×     18× 18× 18× 18× 18× 23× 23× 35× 23×   22×   18× 23×   18×   17×         17×     12× 12×       15×           14×                                                 18× 18× 18× 18×         18× 18× 18× 18× 18× 30× 30× 30× 30×   30×           30×     25× 25× 25× 22× 22× 22× 22× 22× 22× 22× 22×         30×   18× 30×             15× 15× 15× 15×           15×   15×         12× 12×   12× 12× 12× 12×   12×         12× 12×   11×     6391× 3184×   3207× 3207×   3207×   3207×   3207× 12×   3207× 3207× 3207× 3207× 3207×   70167×        
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../base/classes", "../../common/constant", "@syncfusion/ej2-inputs", "@syncfusion/ej2-buttons", "../base/enum", "../base/util", "../../common/util", "../../editor-manager/plugin/audio", "./../../common/constant"], function (require, exports, ej2_base_1, ej2_base_2, events, classes, constant_1, ej2_inputs_1, ej2_buttons_1, enum_1, util_1, util_2, audio_1, EVENTS) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Audio = (function () {
        function Audio(parent, serviceLocator) {
            this.isAudioUploaded = false;
            this.isAllowedTypes = true;
            this.deletedAudio = [];
            this.isMultiAudioPaste = false;
            this.remainingPastedAudios = 0;
            this.pendingAudioQTArgs = null;
            this.timeoutIds = [];
            this.parent = parent;
            this.rteID = parent.element.id;
            this.i10n = serviceLocator.getService('rteLocale');
            this.rendererFactory = serviceLocator.getService('rendererFactory');
            this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
            this.popupUploaderObj = serviceLocator.getService('popupUploaderObject');
            this.addEventListener();
            this.onDocumentClickBoundFn = this.onDocumentClick.bind(this);
            this.inputUrlHandler = this.onInputUrl.bind(this);
            this.isDestroyed = false;
        }
        Audio.prototype.addEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.on(events.keyDown, this.onKeyDown, this);
            this.parent.on(events.keyUp, this.onKeyUp, this);
            this.parent.on(events.insertAudio, this.insertingAudio, this);
            this.parent.on(events.initialEnd, this.afterRender, this);
            this.parent.on(events.dynamicModule, this.afterRender, this);
            this.parent.on(events.showAudioDialog, this.showDialog, this);
            this.parent.on(events.closeAudioDialog, this.closeDialog, this);
            this.parent.on(events.audioToolbarAction, this.onToolbarAction, this);
            this.parent.on(events.dropDownSelect, this.alignmentSelect, this);
            this.parent.on(events.audioDelete, this.deleteAudio, this);
            this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
            this.parent.on(events.insertCompleted, this.showAudioQuickToolbar, this);
            this.parent.on(events.destroy, this.destroy, this);
            this.parent.on(events.iframeMouseDown, this.closeDialog, this);
            this.parent.on(events.bindOnEnd, this.bindOnEnd, this);
            this.parent.on(events.modelChanged, this.onPropertyChanged, this);
            this.parent.on(events.audioPaste, this.audioPaste, this);
        };
        Audio.prototype.removeEventListener = function () {
            this.parent.off(events.keyDown, this.onKeyDown);
            this.parent.off(events.keyUp, this.onKeyUp);
            this.parent.off(events.insertAudio, this.insertingAudio);
            this.parent.off(events.initialEnd, this.afterRender);
            this.parent.off(events.dynamicModule, this.afterRender);
            this.parent.off(events.showAudioDialog, this.showDialog);
            this.parent.off(events.closeAudioDialog, this.closeDialog);
            this.parent.off(events.bindOnEnd, this.bindOnEnd);
            this.parent.off(events.audioToolbarAction, this.onToolbarAction);
            this.parent.off(events.dropDownSelect, this.alignmentSelect);
            this.parent.off(events.audioDelete, this.deleteAudio);
            this.parent.off(events.editAreaClick, this.editAreaClickHandler);
            this.parent.off(events.insertCompleted, this.showAudioQuickToolbar);
            this.parent.off(events.destroy, this.destroy);
            this.parent.off(events.iframeMouseDown, this.closeDialog);
            this.parent.off(EVENTS.touchStart, this.touchStart);
            this.parent.off(EVENTS.touchEnd, this.audioClick);
            this.parent.off(EVENTS.dropEvent, this.dragDrop);
            this.parent.off(EVENTS.dragEnter, this.dragEnter);
            this.parent.off(EVENTS.dragOver, this.dragOver);
            this.parent.off(events.modelChanged, this.onPropertyChanged);
            this.parent.off(events.audioPaste, this.audioPaste);
            if (!ej2_base_1.isNullOrUndefined(this.contentModule)) {
                this.parent.element.ownerDocument.removeEventListener('mousedown', this.onDocumentClickBoundFn);
            }
        };
        Audio.prototype.bindOnEnd = function () {
            if (!this.parent.formatter.editorManager.audioObj) {
                this.parent.formatter.editorManager.audioObj = new audio_1.AudioCommand(this.parent.formatter.editorManager);
            }
        };
        Audio.prototype.afterRender = function () {
            this.contentModule = this.rendererFactory.getRenderer(enum_1.RenderType.Content);
            var dropElement = this.parent.iframeSettings.enable ?
                this.parent.inputElement.ownerDocument : this.parent.inputElement;
            this.parent.on(EVENTS.dropEvent, this.dragDrop, this);
            this.parent.on(EVENTS.dragEnter, this.dragEnter, this);
            this.parent.on(EVENTS.dragOver, this.dragOver, this);
            this.parent.on(EVENTS.touchStart, this.touchStart, this);
            this.parent.on(EVENTS.touchEnd, this.audioClick, this);
            if (!this.parent.readonly) {
                this.parent.element.ownerDocument.addEventListener('mousedown', this.onDocumentClickBoundFn);
            }
        };
        Audio.prototype.onPropertyChanged = function (e) {
            for (var _i = 0, _a = Object.keys(e.newProp); _i < _a.length; _i++) {
                var prop = _a[_i];
                if (prop === 'readonly') {
                    if (this.parent.readonly) {
                        this.parent.element.ownerDocument.removeEventListener('mousedown', this.onDocumentClickBoundFn);
                    }
                    else {
                        this.parent.element.ownerDocument.addEventListener('mousedown', this.onDocumentClickBoundFn);
                    }
                }
            }
        };
        Audio.prototype.checkAudioBack = function (range) {
            if (range.startContainer.nodeName === '#text' && range.startOffset === 0 &&
                !ej2_base_2.isNullOrUndefined(range.startContainer.previousSibling) && this.isAudioElem(range.startContainer.previousSibling)) {
                this.deletedAudio.push(range.startContainer.previousSibling);
            }
            else Iif (range.startContainer.nodeName !== '#text' && !ej2_base_2.isNullOrUndefined(range.startContainer.childNodes[range.startOffset - 1]) &&
                this.isAudioElem(range.startContainer.childNodes[range.startOffset - 1])) {
                this.deletedAudio.push(range.startContainer.childNodes[range.startOffset - 1]);
            }
        };
        Audio.prototype.checkAudioDel = function (range) {
            Iif (range.startContainer.nodeName === '#text' && range.startOffset === range.startContainer.textContent.length &&
                !ej2_base_2.isNullOrUndefined(range.startContainer.nextSibling) && range.startContainer.nextSibling.nodeName === 'AUDIO') {
                this.deletedAudio.push(range.startContainer.nextSibling);
            }
            else if (range.startContainer.nodeName !== '#text' && !ej2_base_2.isNullOrUndefined(range.startContainer.childNodes[range.startOffset]) &&
                this.isAudioElem(range.startContainer.childNodes[range.startOffset])) {
                this.deletedAudio.push(range.startContainer.childNodes[range.startOffset]);
            }
        };
        Audio.prototype.undoStack = function (args) {
            if ((args.subCommand.toLowerCase() === 'undo' || args.subCommand.toLowerCase() === 'redo') && this.parent.editorMode === 'HTML') {
                for (var i = 0; i < this.parent.formatter.getUndoRedoStack().length; i++) {
                    var temp = this.parent.createElement('div');
                    var contentElem = this.parent.formatter.getUndoRedoStack()[i].text;
                    temp.appendChild(contentElem.cloneNode(true));
                }
            }
        };
        Audio.prototype.touchStart = function (e, ele) {
            if (this.parent.readonly) {
                return;
            }
            this.prevSelectedAudEle = this.audEle;
        };
        Audio.prototype.onToolbarAction = function (args) {
            if (util_2.isIDevice()) {
                this.parent.notify(events.selectionRestore, {});
            }
            var item = args.args.item;
            switch (item.subCommand) {
                case 'AudioReplace':
                    this.parent.notify(events.insertAudio, args);
                    break;
                case 'AudioRemove':
                    this.parent.notify(events.audioDelete, args);
                    break;
            }
        };
        Audio.prototype.onKeyUp = function (event) {
            if (!ej2_base_2.isNullOrUndefined(this.deletedAudio) && this.deletedAudio.length > 0) {
                for (var i = 0; i < this.deletedAudio.length; i++) {
                    var elem = this.deletedAudio[i];
                    var srcElem = elem.tagName === 'SOURCE' ? elem : elem.querySelector('source');
                    var args = {
                        element: this.deletedAudio[i].querySelector('audio'),
                        src: !ej2_base_2.isNullOrUndefined(srcElem) ? srcElem.getAttribute('src') : ''
                    };
                    Eif (args.src !== '') {
                        this.parent.trigger(events.afterMediaDelete, args);
                    }
                }
            }
        };
        Audio.prototype.onKeyDown = function (event) {
            var originalEvent = event.args;
            var range;
            var save;
            var selectNodeEle;
            var selectParentEle;
            this.deletedAudio = [];
            var isCursor;
            var keyCodeValues = [27, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123,
                44, 45, 9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93, 144, 145, 182, 183];
            Eif (this.parent.editorMode === 'HTML') {
                range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
                isCursor = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
            }
            if (!isCursor && this.parent.editorMode === 'HTML' && keyCodeValues.indexOf(originalEvent.which) < 0) {
                var nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
                for (var i = 0; i < nodes.length; i++) {
                    if (this.isAudioElem(nodes[i])) {
                        this.deletedAudio.push(nodes[i]);
                    }
                }
            }
            if (this.parent.editorMode === 'HTML' && ((originalEvent.which === 8 && originalEvent.code === 'Backspace') ||
                (originalEvent.which === 46 && originalEvent.code === 'Delete'))) {
                var isCursor_1 = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
                if ((originalEvent.which === 8 && originalEvent.code === 'Backspace' && isCursor_1)) {
                    this.checkAudioBack(range);
                }
                else if ((originalEvent.which === 46 && originalEvent.code === 'Delete' && isCursor_1)) {
                    this.checkAudioDel(range);
                }
            }
            if (!ej2_base_1.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&
                originalEvent.code !== 'KeyK') {
                range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
                selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
                selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
            }
            if (originalEvent.ctrlKey && (originalEvent.keyCode === 89 || originalEvent.keyCode === 90)) {
                this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
            }
            if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
                Eif (selectNodeEle && selectNodeEle[0]) {
                    var isAudioSelected = this.isAudioElem(selectNodeEle[0]);
                    var isAudioDeleteKeyPress = originalEvent.keyCode === 46 &&
                        (selectNodeEle[0].nextSibling &&
                            this.isAudioElem(selectNodeEle[0].nextSibling) &&
                            (range.startOffset === range.endOffset) &&
                            (range.startContainer.textContent.length === range.startOffset));
                    var isAudioBackSpaceKeyPress = originalEvent.keyCode === 8 &&
                        (selectNodeEle[0].previousSibling &&
                            this.isAudioElem(selectNodeEle[0].previousSibling) &&
                            (range.startOffset === range.endOffset) && range.startOffset === 0);
                    if ((isAudioSelected || isAudioBackSpaceKeyPress || isAudioDeleteKeyPress)) {
                        Eif (!ej2_base_1.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                            save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                        }
                        originalEvent.preventDefault();
                        var event_1 = {
                            selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
                            args: {
                                item: { command: 'Audios', subCommand: 'AudioRemove' },
                                originalEvent: originalEvent
                            }
                        };
                        this.deleteAudio(event_1, originalEvent.keyCode);
                    }
                }
            }
            this.isAudioRemoved = false;
            switch (originalEvent.action) {
                case 'escape':
                    if (!ej2_base_1.isNullOrUndefined(this.dialogObj)) {
                        this.dialogObj.close();
                    }
                    break;
                case 'backspace':
                case 'delete':
                    if (this.parent.editorMode !== 'Markdown' && range.startContainer === range.endContainer && range.startOffset === range.endOffset) {
                        if (range.startContainer.nodeType === 3) {
                            if (originalEvent.code === 'Backspace') {
                                if (range.startContainer.previousElementSibling && range.startOffset === 0 &&
                                    range.startContainer.previousElementSibling.classList.contains(classes.CLS_AUDIOWRAP)) {
                                    ej2_base_1.detach(range.startContainer.previousElementSibling);
                                    this.isAudioRemoved = true;
                                }
                            }
                            else {
                                if (range.startContainer.nextElementSibling &&
                                    range.endContainer.textContent.length === range.endOffset &&
                                    range.startContainer.nextElementSibling.classList.contains(classes.CLS_AUDIOWRAP)) {
                                    ej2_base_1.detach(range.startContainer.nextElementSibling);
                                    this.isAudioRemoved = true;
                                }
                            }
                        }
                        else if (range.startContainer.nodeType === 1 && (range.startContainer.classList &&
                            (range.startContainer.classList.contains(classes.CLS_AUDIOWRAP) ||
                                range.startContainer.classList.contains(classes.CLS_CLICKELEM) ||
                                range.startContainer.classList.contains(classes.CLS_VID_CLICK_ELEM)))) {
                            ej2_base_1.detach(range.startContainer);
                        }
                    }
                    break;
                case 'insert-audio':
                    Eif (!ej2_base_1.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                        save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                    }
                    this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                    originalEvent.preventDefault();
                    break;
            }
            if (originalEvent.ctrlKey && originalEvent.key === 'a') {
                this.handleSelectAll();
            }
        };
        Audio.prototype.handleSelectAll = function () {
            var audioFocusNodes = this.parent.inputElement.querySelectorAll('.' + constant_1.CLS_AUD_FOCUS);
            ej2_base_2.removeClass(audioFocusNodes, constant_1.CLS_AUD_FOCUS);
        };
        Audio.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
            var range;
            var save;
            var selectNodeEle;
            var selectParentEle;
            if (!isInternal && !ej2_base_2.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
                save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
                selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
            }
            else {
                save = selection;
                selectNodeEle = ele;
                selectParentEle = parentEle;
            }
            Eif (this.parent.editorMode === 'HTML') {
                this.insertAudio({
                    args: {
                        item: { command: 'Audios', subCommand: 'Audio' },
                        originalEvent: event,
                        name: !isInternal ? 'showDialog' : null
                    },
                    selectNode: selectNodeEle,
                    selection: save,
                    selectParent: selectParentEle
                });
            }
        };
        Audio.prototype.showDialog = function (args) {
            if (!ej2_base_2.isNullOrUndefined(args.originalEvent)) {
                this.openDialog(false, args.originalEvent);
            }
            else {
                this.openDialog(false);
            }
        };
        Audio.prototype.closeDialog = function () {
            if (this.dialogObj) {
                this.dialogObj.hide({ returnValue: true });
            }
        };
        Audio.prototype.deleteAudio = function (e, keyCode) {
            if (!this.isAudioElem(e.selectNode[0])) {
                return;
            }
            if (this.audEle) {
                Iif (e.selectNode[0].nodeType === 3) {
                    e.selectNode[0] = this.audEle;
                }
                else Eif (this.isAudioElem(e.selectNode[0])) {
                    e.selectNode[0] = e.selectNode[0].classList.contains(classes.CLS_AUDIOWRAP) ? e.selectNode[0] :
                        e.selectNode[0].parentElement;
                }
            }
            var args = {
                element: e.selectNode[0].querySelector('audio'),
                src: e.selectNode[0].querySelector('source').getAttribute('src')
            };
            if (this.parent.formatter.getUndoRedoStack().length === 0) {
                this.parent.formatter.saveData();
            }
            e.selection.restore();
            this.parent.formatter.process(this.parent, e.args, e.args, {
                selectNode: e.selectNode,
                subCommand: e.args.item.subCommand
            });
            Iif (this.quickToolObj && document.body.contains(this.quickToolObj.audioQTBar.element)) {
                this.quickToolObj.audioQTBar.hidePopup();
            }
            if (ej2_base_1.isNullOrUndefined(keyCode)) {
                this.parent.trigger(events.afterMediaDelete, args);
            }
        };
        Audio.prototype.audioClick = function (e) {
            if (ej2_base_2.Browser.isDevice) {
                if (this.isAudioElem(e.target)) {
                    e.target.focus();
                    this.isAudioClicked = true;
                }
                else {
                    if (!this.parent.readonly && !this.parent.videoModule.isVideoClicked && !this.parent.imageModule.isImageClicked) {
                        this.isAudioClicked = false;
                    }
                }
            }
            if (this.isAudioElem(e.target) && !this.parent.userAgentData.isSafari()) {
                this.audEle = e.target.querySelector('audio');
                e.preventDefault();
            }
        };
        Audio.prototype.onDocumentClick = function (e) {
            var target = e.target;
            Iif (ej2_base_2.isNullOrUndefined(this.contentModule.getEditPanel())) {
                return;
            }
            if (this.isAudioElem(target)) {
                this.audEle = target.querySelector('audio');
            }
            if (!ej2_base_1.isNullOrUndefined(this.dialogObj) && ((!ej2_base_2.closest(target, '[id=' + "'" + this.dialogObj.element.id + "'" + ']') && this.parent.toolbarSettings.enable && this.parent.getToolbarElement() &&
                !this.parent.getToolbarElement().contains(e.target)) ||
                (this.parent.getToolbarElement() && this.parent.getToolbarElement().contains(e.target) &&
                    !ej2_base_2.closest(target, '#' + this.parent.getID() + '_toolbar_Audio') &&
                    !target.querySelector('#' + this.parent.getID() + '_toolbar_Audio')))) {
                Iif (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
                }
                else {
                    this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
                    this.dialogObj.hide({ returnValue: true });
                    this.parent.isBlur = true;
                    util_1.dispatchEvent(this.parent.element, 'focusout');
                }
            }
            if (!this.isAudioElem(target)) {
                if (!ej2_base_2.isNullOrUndefined(this.audEle) && this.audEle.style.outline !== '') {
                    this.audEle.style.outline = '';
                }
                else if (!ej2_base_2.isNullOrUndefined(this.prevSelectedAudEle) && this.prevSelectedAudEle.style.outline !== '') {
                    this.prevSelectedAudEle.style.outline = '';
                }
            }
            if (this.parent.inlineMode.enable && target && this.dialogObj && !ej2_base_2.closest(target, '#' + this.dialogObj.element.id)) {
                this.dialogObj.hide();
            }
        };
        Audio.prototype.alignmentSelect = function (e) {
            var item = e.item;
            if (!document.body.contains(document.body.querySelector('.e-rte-quick-toolbar')) || item.command !== 'Audios') {
                return;
            }
            var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
            var selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
            Eif (this.audEle) {
                selectNodeEle = [this.audEle];
            }
            var args = { args: e, selectNode: selectNodeEle };
            if (this.parent.formatter.getUndoRedoStack().length === 0) {
                this.parent.formatter.saveData();
            }
            switch (item.subCommand) {
                case 'Inline':
                    this.inline(args);
                    break;
                case 'Break':
                    this.break(args);
                    break;
            }
            Iif (this.quickToolObj && document.body.contains(this.quickToolObj.audioQTBar.element)) {
                this.quickToolObj.audioQTBar.hidePopup();
                ej2_base_2.removeClass([selectNodeEle[0]], constant_1.CLS_AUD_FOCUS);
            }
        };
        Audio.prototype.break = function (e) {
            Iif (e.selectNode[0].nodeName !== 'AUDIO') {
                return;
            }
            var subCommand = (e.args.item && e.args.item.subCommand) ?
                e.args.item.subCommand : 'Break';
            this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
        };
        Audio.prototype.inline = function (e) {
            Iif (e.selectNode[0].nodeName !== 'AUDIO') {
                return;
            }
            var subCommand = (e.args.item && e.args.item.subCommand) ?
                e.args.item.subCommand : 'Inline';
            this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
        };
        Audio.prototype.editAreaClickHandler = function (e) {
            Iif (this.parent.readonly) {
                this.hideAudioQuickToolbar();
                return;
            }
            var args = e.args;
            var target = args.target;
            var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;
            if (this.parent.quickToolbarModule && this.parent.quickToolbarModule.audioQTBar) {
                this.quickToolObj = this.parent.quickToolbarModule;
            }
            if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {
                if ((showOnRightClick && args.which === 1) && !ej2_base_1.isNullOrUndefined(target) &&
                    this.isAudioElem(target)) {
                    this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
                    this.parent.formatter.editorManager.nodeSelection.setSelectionContents(this.contentModule.getDocument(), target);
                }
                if (this.isAudioElem(target) && target.querySelector('audio')) {
                    target.querySelector('audio').style.outline = '2px solid #4a90e2';
                }
                return;
            }
            if (this.parent.editorMode === 'HTML' && this.parent.quickToolbarModule && this.parent.quickToolbarModule.audioQTBar) {
                this.contentModule = this.rendererFactory.getRenderer(enum_1.RenderType.Content);
                if (this.isAudioElem(target) && this.parent.quickToolbarModule) {
                    this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
                    this.parent.formatter.editorManager.nodeSelection.setSelectionContents(this.contentModule.getDocument(), target);
                    if (util_2.isIDevice()) {
                        this.parent.notify(events.selectionSave, e);
                    }
                    this.showAudioQuickToolbar({ args: args, type: 'Audios', elements: [args.target] });
                }
                else {
                    this.hideAudioQuickToolbar();
                }
            }
        };
        Audio.prototype.isAudioElem = function (target) {
            if (target && target.nodeType !== 3 && target.nodeName !== 'BR' && (target.classList &&
                (target.classList.contains(classes.CLS_AUDIOWRAP) || target.classList.contains('e-rte-audio') || target.classList.contains(classes.CLS_CLICKELEM)))) {
                return true;
            }
            else {
                return false;
            }
        };
        Audio.prototype.showAudioQuickToolbar = function (e) {
            var _this = this;
            if (e.type !== 'Audios' || ej2_base_1.isNullOrUndefined(this.parent.quickToolbarModule)
                || ej2_base_1.isNullOrUndefined(this.parent.quickToolbarModule.audioQTBar) || ej2_base_1.isNullOrUndefined(e.args)) {
                return;
            }
            Iif (!ej2_base_2.isNullOrUndefined(this.parent.pasteCleanupModule) && !ej2_base_2.isNullOrUndefined((e.args).type) && (e.args).type === 'paste') {
                return;
            }
            Iif (!ej2_base_1.isNullOrUndefined(this.showPopupTime)) {
                clearTimeout(this.showPopupTime);
                this.showPopupTime = null;
            }
            if (this.quickToolObj && this.quickToolObj.audioQTBar &&
                (this.parent.contentModule.getDocument()).contains(this.quickToolObj.audioQTBar.element)) {
                this.quickToolObj.audioQTBar.hidePopup();
            }
            Iif (this.isMultiAudioPaste) {
                this.pendingAudioQTArgs = e;
                if (this.remainingPastedAudios > 0) {
                    this.remainingPastedAudios--;
                }
                if (this.remainingPastedAudios > 0) {
                    return;
                }
                e = this.pendingAudioQTArgs || e;
                this.isMultiAudioPaste = false;
                this.pendingAudioQTArgs = null;
                this.remainingPastedAudios = 0;
            }
            this.quickToolObj = this.parent.quickToolbarModule;
            var target = e.elements;
            [].forEach.call(e.elements, function (element, index) {
                Eif (index === 0) {
                    target = element;
                }
            });
            Eif (this.isAudioElem(target)) {
                var panel = this.contentModule.getEditPanel();
                Eif (panel) {
                    var focusedAudios = panel.querySelectorAll('.' + constant_1.CLS_AUD_FOCUS);
                    if (focusedAudios && focusedAudios.length > 0) {
                        ej2_base_2.removeClass(focusedAudios, constant_1.CLS_AUD_FOCUS);
                        for (var i = 0; i < focusedAudios.length; i++) {
                            var audEl = focusedAudios[i];
                            Eif (audEl && audEl.style) {
                                audEl.style.outline = '';
                            }
                        }
                    }
                }
                var audioElem = target.tagName === 'AUDIO' ? target : target.querySelector('audio');
                ej2_base_1.addClass([audioElem], [constant_1.CLS_AUD_FOCUS]);
                audioElem.style.outline = '2px solid #4a90e2';
                this.audEle = audioElem;
            }
            Eif (this.parent.quickToolbarModule.audioQTBar) {
                Iif (e.isNotify) {
                    var id = setTimeout(function () {
                        _this.parent.formatter.editorManager.nodeSelection.Clear(_this.contentModule.getDocument());
                        _this.parent.formatter.editorManager.nodeSelection.setSelectionContents(_this.contentModule.getDocument(), target);
                        _this.quickToolObj.audioQTBar.showPopup(target, e.args);
                    }, this.parent.element.dataset.rteUnitTesting === 'true' ? 0 : 400);
                    this.showPopupTime = id;
                    this.timeoutIds.push(id);
                }
                else {
                    this.quickToolObj.audioQTBar.showPopup(target, e.args);
                }
            }
        };
        Audio.prototype.hideAudioQuickToolbar = function () {
            if (!ej2_base_1.isNullOrUndefined(this.contentModule.getEditPanel().querySelector('.' + constant_1.CLS_AUD_FOCUS))) {
                ej2_base_2.removeClass([this.contentModule.getEditPanel().querySelector('.' + constant_1.CLS_AUD_FOCUS)], constant_1.CLS_AUD_FOCUS);
                Eif (!ej2_base_2.isNullOrUndefined(this.audEle)) {
                    this.audEle.style.outline = '';
                }
                if (this.quickToolObj && this.quickToolObj.audioQTBar && document.body.contains(this.quickToolObj.audioQTBar.element)) {
                    this.quickToolObj.audioQTBar.hidePopup();
                }
            }
        };
        Audio.prototype.insertingAudio = function (e) {
            this.insertAudio(e);
            if (!ej2_base_1.isNullOrUndefined(this.dialogObj)) {
                this.dialogObj.element.style.maxHeight = 'inherit';
                var dialogContent = this.dialogObj.element.querySelector('.e-audio-content');
                Eif (!ej2_base_1.isNullOrUndefined(this.parent.insertAudioSettings.path) || this.parent.editorMode === 'HTML') {
                    document.getElementById(this.rteID + '_insertAudio').focus();
                }
                else {
                    dialogContent.querySelector('.e-audio-url').focus();
                }
            }
        };
        Audio.prototype.clearDialogObj = function () {
            if (this.uploadObj && !this.uploadObj.isDestroyed) {
                this.uploadObj.destroy();
                ej2_base_1.detach(this.uploadObj.element);
                this.uploadObj = null;
            }
            if (this.button && !this.button.isDestroyed) {
                this.button.destroy();
                ej2_base_1.detach(this.button.element);
                this.button = null;
            }
            if (this.dialogObj && !this.dialogObj.isDestroyed) {
                if (!ej2_base_2.isNullOrUndefined(this.inputUrl)) {
                    ej2_base_1.EventHandler.remove(this.inputUrl, 'input', this.inputUrlHandler);
                    this.inputUrl = null;
                }
                this.dialogObj.destroy();
                if (!ej2_base_2.isNullOrUndefined(this.dialogObj.element)) {
                    ej2_base_1.detach(this.dialogObj.element);
                }
                this.dialogObj = null;
            }
        };
        Audio.prototype.insertAudio = function (e) {
            var _this = this;
            if (this.dialogObj) {
                this.dialogObj.hide({ returnValue: true });
                return;
            }
            var audioDialog = this.parent.createElement('div', { className: 'e-rte-audio-dialog', id: this.rteID + '_audio' });
            this.parent.rootContainer.appendChild(audioDialog);
            var audioInsert = this.i10n.getConstant('dialogInsert');
            var audiolinkCancel = this.i10n.getConstant('dialogCancel');
            var audioHeader = this.i10n.getConstant('audioHeader');
            var selection = e.selection;
            var selectObj = { selfAudio: this, selection: e.selection, args: e.args, selectParent: e.selectParent };
            var dialogModel = {
                header: audioHeader,
                cssClass: classes.CLS_RTE_ELEMENTS,
                enableRtl: this.parent.enableRtl,
                locale: this.parent.locale,
                showCloseIcon: true, closeOnEscape: true, width: (ej2_base_2.Browser.isDevice) ? '290px' : '340px',
                isModal: ej2_base_2.Browser.isDevice,
                position: { X: 'center', Y: (ej2_base_2.Browser.isDevice) ? 'center' : 'top' },
                buttons: [{
                        click: this.insertAudioUrl.bind(selectObj),
                        buttonModel: { content: audioInsert, cssClass: 'e-flat e-insertAudio', isPrimary: true, disabled: true }
                    },
                    {
                        click: function (e) {
                            _this.cancelDialog(e);
                        },
                        buttonModel: { cssClass: 'e-flat e-cancel', content: audiolinkCancel }
                    }],
                target: (ej2_base_2.Browser.isDevice) ? document.body : this.parent.element,
                animationSettings: { effect: 'None' },
                close: function (event) {
                    if (_this.isAudioUploaded) {
                        Iif (_this.dialogObj.element.querySelector('.e-file-abort-btn')) {
                            _this.dialogObj.element.querySelector('.e-file-abort-btn').click();
                        }
                        else {
                            _this.uploadObj.remove();
                        }
                    }
                    _this.parent.isBlur = false;
                    if (event && !ej2_base_2.isNullOrUndefined(event.event) && event.event.returnValue) {
                        Eif (_this.parent.editorMode === 'HTML') {
                            selection.restore();
                        }
                    }
                    _this.clearDialogObj();
                    _this.dialogRenderObj.close(event);
                }
            };
            var dialogContent = this.parent.createElement('div', { className: 'e-audio-content' });
            Eif (!ej2_base_1.isNullOrUndefined(this.parent.insertAudioSettings.path) || this.parent.editorMode === 'HTML') {
                dialogContent.appendChild(this.audioUpload(e));
            }
            var linkHeader = this.parent.createElement('div', { className: 'e-audioheader' });
            var linkHeaderText = this.i10n.getConstant('audioLinkHeader');
            Eif (this.parent.editorMode === 'HTML') {
                linkHeader.innerHTML = linkHeaderText;
            }
            dialogContent.appendChild(linkHeader);
            dialogContent.appendChild(this.audioUrlPopup(e));
            if (e.selectNode && e.selectNode[0].nodeType === 1 && this.isAudioElem(e.selectNode[0])) {
                dialogModel.header = this.parent.localeObj.getConstant('editAudioHeader');
                dialogModel.content = dialogContent;
                dialogModel.buttons[0].buttonModel.cssClass = dialogModel.buttons[0].buttonModel.cssClass + ' e-updateAudio';
            }
            else {
                dialogModel.content = dialogContent;
            }
            this.dialogObj = this.dialogRenderObj.render(dialogModel);
            this.dialogObj.createElement = this.parent.createElement;
            this.dialogObj.appendTo(audioDialog);
            if (e.selectNode && e.selectNode[0].nodeType === 1 && this.isAudioElem(e.selectNode[0]) && (e.name === 'insertAudio')) {
                this.dialogObj.element.querySelector('.e-insertAudio').textContent = this.parent.localeObj.getConstant('dialogUpdate');
            }
            audioDialog.style.maxHeight = 'inherit';
            if (this.quickToolObj) {
                if (this.quickToolObj.audioQTBar && document.body.contains(this.quickToolObj.audioQTBar.element)) {
                    this.quickToolObj.audioQTBar.hidePopup();
                }
                Iif (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
                    this.quickToolObj.inlineQTBar.hidePopup();
                }
                Iif (this.quickToolObj.textQTBar && this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
                    this.quickToolObj.textQTBar.hidePopup();
                }
            }
        };
        Audio.prototype.audioUrlPopup = function (e) {
            var audioUrl = this.parent.createElement('div', { className: 'audioUrl' });
            var placeUrl = this.i10n.getConstant('audioUrl');
            this.inputUrl = this.parent.createElement('input', {
                className: 'e-input e-audio-url',
                attrs: { placeholder: placeUrl, spellcheck: 'false', 'aria-label': this.i10n.getConstant('audioLinkHeader') }
            });
            ej2_base_1.EventHandler.add(this.inputUrl, 'input', this.inputUrlHandler, this);
            if (e.selectNode && this.isAudioElem(e.selectNode[0])) {
                var regex = new RegExp(/([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi);
                var sourceElement = e.selectNode[0].querySelector('source');
                this.inputUrl.value = sourceElement.src.match(regex) ? sourceElement.src : '';
            }
            audioUrl.appendChild(this.inputUrl);
            return audioUrl;
        };
        Audio.prototype.onInputUrl = function () {
            Eif (!ej2_base_2.isNullOrUndefined(this.inputUrl)) {
                if (this.inputUrl.value.length === 0) {
                    util_1.toggleButtonDisableState(this.dialogObj.getButtons(0), true);
                }
                else {
                    util_1.toggleButtonDisableState(this.dialogObj.getButtons(0), false);
                }
            }
        };
        Audio.prototype.audioUpload = function (e) {
            var _this = this;
            var save;
            var selectParent;
            var proxy = this;
            var iframe = proxy.parent.iframeSettings.enable;
            if (proxy.parent.editorMode === 'HTML' && (!iframe && ej2_base_1.isNullOrUndefined(ej2_base_2.closest(e.selection.range.startContainer.parentNode, '[id='
                + "'" + this.parent.contentModule.getPanel().id + "'" + ']'))
                || (iframe && !util_1.hasClass(e.selection.range.startContainer.parentNode.ownerDocument.querySelector('body'), 'e-lib')))) {
                this.contentModule.getEditPanel().focus();
                var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
                save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                selectParent = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
            }
            else {
                save = e.selection;
                selectParent = e.selectParent;
            }
            var uploadParentEle = this.parent.createElement('div', { className: 'e-aud-uploadwrap e-droparea' });
            var deviceAudioUpMsg = this.i10n.getConstant('audioDeviceUploadMessage');
            var audioUpMsg = this.i10n.getConstant('audioUploadMessage');
            var span = this.parent.createElement('span', { className: 'e-droptext' });
            var spanMsg = this.parent.createElement('span', {
                className: 'e-rte-upload-text', innerHTML: ((ej2_base_2.Browser.isDevice) ? deviceAudioUpMsg : audioUpMsg)
            });
            span.appendChild(spanMsg);
            var btnEle = this.parent.createElement('button', {
                className: 'e-browsebtn', id: this.rteID + '_insertAudio', attrs: { autofocus: 'true', type: 'button' }
            });
            span.appendChild(btnEle);
            uploadParentEle.appendChild(span);
            var browserMsg = this.i10n.getConstant('browse');
            this.button = new ej2_buttons_1.Button({ content: browserMsg, enableRtl: this.parent.enableRtl });
            this.button.isStringTemplate = true;
            this.button.createElement = this.parent.createElement;
            this.button.appendTo(btnEle);
            var btnClick = (ej2_base_2.Browser.isDevice) ? span : btnEle;
            ej2_base_1.EventHandler.add(btnClick, 'click', this.fileSelect, this);
            var uploadEle = this.parent.createElement('input', {
                id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
            });
            uploadParentEle.appendChild(uploadEle);
            var fileName;
            var selectArgs;
            this.uploadObj = new ej2_inputs_1.Uploader({
                asyncSettings: { saveUrl: this.parent.insertAudioSettings.saveUrl, removeUrl: this.parent.insertAudioSettings.removeUrl },
                dropArea: span, multiple: false, enableRtl: this.parent.enableRtl,
                allowedExtensions: this.parent.insertAudioSettings.allowedTypes.toString(),
                maxFileSize: this.parent.insertAudioSettings.maxFileSize,
                selected: function (e) {
                    proxy.isAudioUploaded = true;
                    selectArgs = e;
                    _this.parent.trigger(events.fileSelected, selectArgs, function (selectArgs) {
                        if (!selectArgs.cancel) {
                            Iif (ej2_base_2.isNullOrUndefined(selectArgs.filesData[0])) {
                                return;
                            }
                            _this.checkExtension(selectArgs.filesData[0]);
                            fileName = selectArgs.filesData[0].name;
                            if (_this.parent.editorMode === 'HTML' && ej2_base_1.isNullOrUndefined(_this.parent.insertAudioSettings.path)) {
                                var reader_1 = new FileReader();
                                reader_1.addEventListener('load', function (e) {
                                    var url = _this.parent.insertAudioSettings.saveFormat === 'Base64' ? reader_1.result :
                                        URL.createObjectURL(util_2.convertToBlob(reader_1.result));
                                    proxy.uploadUrl = {
                                        url: url, selection: save, fileName: fileName,
                                        selectParent: selectParent
                                    };
                                    if (!ej2_base_2.isNullOrUndefined(proxy.inputUrl)) {
                                        proxy.inputUrl.setAttribute('disabled', 'true');
                                    }
                                    if (ej2_base_1.isNullOrUndefined(proxy.parent.insertAudioSettings.saveUrl) && _this.isAllowedTypes
                                        && !ej2_base_1.isNullOrUndefined(_this.dialogObj)) {
                                        util_1.toggleButtonDisableState(_this.dialogObj.getButtons(0), false);
                                    }
                                });
                                reader_1.readAsDataURL(selectArgs.filesData[0].rawFile);
                            }
                        }
                    });
                },
                beforeUpload: function (args) {
                    _this.parent.trigger(events.beforeFileUpload, args);
                },
                uploading: function (e) {
                    Eif (!_this.parent.isServerRendered) {
                        _this.parent.trigger(events.fileUploading, e);
                    }
                },
                success: function (e) {
                    _this.parent.trigger(events.fileUploadSuccess, e, function (e) {
                        if (!ej2_base_1.isNullOrUndefined(_this.parent.insertAudioSettings.path)) {
                            var url = _this.parent.insertAudioSettings.path + e.file.name;
                            var value = { url: url, selection: save };
                            proxy.uploadUrl = {
                                url: url, selection: save, fileName: fileName, selectParent: selectParent
                            };
                            proxy.inputUrl.setAttribute('disabled', 'true');
                        }
                        if (e.operation === 'upload' && !ej2_base_1.isNullOrUndefined(_this.dialogObj)) {
                            util_1.toggleButtonDisableState(_this.dialogObj.getButtons(0), false);
                        }
                    });
                },
                failure: function (e) {
                    _this.parent.trigger(events.fileUploadFailed, e);
                },
                removing: function () {
                    _this.parent.trigger(events.fileRemoving, e, function (e) {
                        proxy.isAudioUploaded = false;
                        util_1.toggleButtonDisableState(_this.dialogObj.getButtons(0), true);
                        proxy.inputUrl.removeAttribute('disabled');
                        if (proxy.uploadUrl) {
                            proxy.uploadUrl.url = '';
                        }
                    });
                }
            });
            this.uploadObj.isStringTemplate = true;
            this.uploadObj.createElement = this.parent.createElement;
            this.uploadObj.appendTo(uploadEle);
            return uploadParentEle;
        };
        Audio.prototype.checkExtension = function (e) {
            Eif (this.uploadObj.allowedExtensions) {
                if (this.uploadObj.allowedExtensions.toLocaleLowerCase().indexOf(('.' + e.type).toLocaleLowerCase()) === -1) {
                    util_1.toggleButtonDisableState(this.dialogObj.getButtons(0), true);
                    this.isAllowedTypes = false;
                }
                else {
                    this.isAllowedTypes = true;
                }
            }
        };
        Audio.prototype.fileSelect = function () {
            this.dialogObj.element.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
            return false;
        };
        Audio.prototype.dragEnter = function (e) {
            e.preventDefault();
        };
        Audio.prototype.dragOver = function (e) {
            if (!e || !e.dataTransfer || e.defaultPrevented) {
                return;
            }
            var dataTransfer = e.dataTransfer;
            var items = dataTransfer.items;
            var item = (items && items.length) ? items[0] : undefined;
            var mimeType = (items && items.length) ? (items[0].type) : '';
            if (!mimeType) {
                var files = dataTransfer.files;
                Iif (files && files.length > 0) {
                    var ext_1 = files[0].name.substring(files[0].name.lastIndexOf('.')).toLowerCase();
                    var allowedTypes_1 = this.parent.insertAudioSettings.allowedTypes;
                    var isAllowed = allowedTypes_1.some(function (t) { return t.toLowerCase() === ext_1; });
                    if (isAllowed) {
                        e.preventDefault();
                        dataTransfer.dropEffect = 'copy';
                        e.stopImmediatePropagation();
                        return;
                    }
                }
                e.preventDefault();
                dataTransfer.dropEffect = 'none';
                e.stopImmediatePropagation();
                return true;
            }
            if (!mimeType.startsWith('audio/')) {
                return;
            }
            var allowedTypes = this.parent.insertAudioSettings.allowedTypes;
            var allowedExts = new Set(allowedTypes.map(function (type) { return (type).toLowerCase(); }));
            var canAccept = false;
            if (item && item.kind === 'file') {
                var mime = (item.type).toLowerCase();
                Eif (mime && mime.startsWith('audio/')) {
                    var ext = this.getAudioExtensionFromMime(mime);
                    canAccept = !!(ext && allowedExts.has('.' + ext));
                }
            }
            Eif (!canAccept) {
                e.preventDefault();
            }
            dataTransfer.dropEffect = canAccept ? 'copy' : 'none';
            e.stopImmediatePropagation();
            if (ej2_base_2.Browser.info.name === 'edge' && dataTransfer && ((dataTransfer.items && dataTransfer.items[0].type && dataTransfer.items[0].type.split('/')[0] === 'audio') ||
                (dataTransfer.types && dataTransfer.types[0] === 'Files'))) {
                e.preventDefault();
            }
            else {
                return true;
            }
        };
        Audio.prototype.getAudioExtensionFromMime = function (mimeType) {
            if (!mimeType) {
                return null;
            }
            var lower = mimeType.toLowerCase().trim();
            if (!lower.startsWith('audio/')) {
                return null;
            }
            var subtype = lower.slice('audio/'.length);
            var paramsIdx = subtype.indexOf(';');
            if (paramsIdx !== -1) {
                subtype = subtype.slice(0, paramsIdx).trim();
            }
            var alias = new Map([
                ['mpeg', 'mp3'],
                ['x-ms-wma', 'wma'],
                ['x-wav', 'wav'],
                ['x-m4a', 'm4a'],
                ['x-aac', 'aac'],
                ['x-flac', 'flac'],
                ['x-ms-wax', 'wax'],
                ['3gpp', '3gp']
            ]);
            var mapped = alias.get(subtype);
            return (mapped != null) ? mapped : (subtype || null);
        };
        Audio.prototype.dragDrop = function (args) {
            var _this = this;
            if (args.dataTransfer.files.length > 0) {
                var fileType = args.dataTransfer.files[0].type;
                var isAudioByMime = fileType.startsWith('audio');
                if (isAudioByMime) {
                    this.parent.trigger(events.beforeMediaDrop, args, function (e) {
                        var isAudioOrFileDrop = e.dataTransfer.files.length > 0;
                        if (!e.cancel && isAudioOrFileDrop) {
                            if (ej2_base_2.closest(e.target, '#' + _this.parent.getID() + '_toolbar') ||
                                _this.parent.inputElement.contentEditable === 'false') {
                                e.preventDefault();
                                return;
                            }
                            e.preventDefault();
                            var range = void 0;
                            Eif (_this.contentModule.getDocument().caretRangeFromPoint) {
                                range = _this.contentModule.getDocument().caretRangeFromPoint(e.clientX, e.clientY);
                            }
                            else if ((e.rangeParent)) {
                                range = _this.contentModule.getDocument().createRange();
                                range.setStart(e.rangeParent, e.rangeOffset);
                            }
                            else {
                                range = _this.getDropRange(e.clientX, e.clientY);
                            }
                            _this.parent.notify(events.selectRange, { range: range });
                            var uploadArea = _this.parent.element.querySelector('.' + classes.CLS_DROPAREA);
                            if (uploadArea) {
                                return;
                            }
                            _this.insertDragAudio(e);
                        }
                        else {
                            Eif (isAudioOrFileDrop) {
                                e.preventDefault();
                            }
                        }
                    });
                }
            }
        };
        Audio.prototype.getDropRange = function (x, y) {
            var startRange = this.contentModule.getDocument().createRange();
            this.parent.formatter.editorManager.nodeSelection.setRange(this.contentModule.getDocument(), startRange);
            var elem = this.contentModule.getDocument().elementFromPoint(x, y);
            var startNode = (elem.childNodes.length > 0 ? elem.childNodes[0] : elem);
            var startCharIndexCharacter = 0;
            Iif (this.parent.inputElement.firstChild.innerHTML === '<br>') {
                startRange.setStart(startNode, startCharIndexCharacter);
                startRange.setEnd(startNode, startCharIndexCharacter);
            }
            else {
                var rangeRect = void 0;
                do {
                    startCharIndexCharacter++;
                    startRange.setStart(startNode, startCharIndexCharacter);
                    startRange.setEnd(startNode, startCharIndexCharacter + 1);
                    rangeRect = startRange.getBoundingClientRect();
                } while (rangeRect.left < x && startCharIndexCharacter < startNode.length - 1);
            }
            return startRange;
        };
        Audio.prototype.insertDragAudio = function (e) {
            this.dragbool = true;
            e.preventDefault();
            var activePopupElement = this.parent.element.querySelector('' + classes.CLS_POPUP_OPEN);
            this.parent.notify(events.drop, { args: e });
            Iif (activePopupElement) {
                activePopupElement.classList.add(classes.CLS_HIDE);
            }
            Eif (e.dataTransfer.files.length > 0) {
                var audioFiles = e.dataTransfer.files;
                var allowedTypes = this.parent.insertAudioSettings.allowedTypes;
                var validFiles = [];
                var _loop_1 = function (i) {
                    var fileName = audioFiles[i].name;
                    var audioType = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
                    var isAllowed = allowedTypes.some(function (t) { return t.toLowerCase() === audioType; });
                    if (!isAllowed) {
                        return "continue";
                    }
                    validFiles.push(audioFiles[i]);
                };
                for (var i = 0; i < audioFiles.length; i++) {
                    _loop_1(i);
                }
                if (validFiles.length === 0) {
                    return;
                }
                if (validFiles.length > 1) {
                    this.isMultiAudioPaste = true;
                    this.remainingPastedAudios = validFiles.length;
                    this.pendingAudioQTArgs = null;
                    Iif (this.quickToolObj && this.quickToolObj.audioQTBar &&
                        (this.parent.contentModule.getDocument()).contains(this.quickToolObj.audioQTBar.element)) {
                        this.quickToolObj.audioQTBar.hidePopup();
                    }
                }
                if (this.parent.insertAudioSettings.saveUrl) {
                    this.onSelect(e);
                }
                else {
                    var args = { args: e, text: '', file: validFiles };
                    this.audioPaste(args);
                }
            }
        };
        Audio.prototype.onSelect = function (args) {
            var _this = this;
            var files = args.dataTransfer.files;
            var allowedTypes = this.parent.insertAudioSettings.allowedTypes;
            var validFiles = [];
            var _loop_2 = function (i) {
                var fileName = files[i].name;
                var fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
                var isAllowed = allowedTypes.some(function (t) { return t.toLowerCase() === fileExt; });
                Eif (isAllowed) {
                    validFiles.push(files[i]);
                }
            };
            for (var i = 0; i < files.length; i++) {
                _loop_2(i);
            }
            Iif (validFiles.length === 0) {
                return;
            }
            var doc = this.parent.contentModule.getDocument();
            var processFile = function (index) {
                if (index >= validFiles.length) {
                    return;
                }
                var currentRange = _this.parent.formatter.editorManager.nodeSelection.getRange(doc);
                var selection = _this.parent.formatter.editorManager.nodeSelection.save(currentRange, doc);
                var file = validFiles[index];
                var audioCommand = {
                    cssClass: (_this.parent.insertAudioSettings.layoutOption === 'Inline' ?
                        classes.CLS_AUDIOINLINE : classes.CLS_AUDIOBREAK),
                    url: _this.parent.insertAudioSettings.path + file.name,
                    selection: selection,
                    fileName: file.name.replace(/\.[a-zA-Z0-9]+$/, '')
                };
                var actionBeginArgs = {
                    requestType: 'Audios',
                    name: 'AudioDragAndDrop',
                    cancel: false,
                    originalEvent: args,
                    itemCollection: audioCommand
                };
                _this.parent.trigger(events.actionBegin, actionBeginArgs, function (actionBeginArgs) {
                    if (!actionBeginArgs.cancel) {
                        _this.parent.formatter.process(_this.parent, { item: { command: 'Audios', subCommand: 'Audio' } }, args, actionBeginArgs.itemCollection);
                        var postRange = _this.parent.formatter.editorManager.nodeSelection.getRange(doc);
                        var audioElement = postRange.commonAncestorContainer.querySelector('audio');
                        if (audioElement) {
                            audioElement.style.opacity = '0.5';
                            _this.uploadMethod(args, audioElement, index);
                        }
                        var audioWraps = doc.querySelectorAll('.e-audio-wrap');
                        if (audioWraps && audioWraps.length > 0) {
                            var lastWrap = audioWraps[audioWraps.length - 1];
                            var nextRange = doc.createRange();
                            nextRange.setStartAfter(lastWrap);
                            nextRange.collapse(true);
                            _this.parent.formatter.editorManager.nodeSelection.setRange(doc, nextRange);
                        }
                        processFile(index + 1);
                    }
                    else {
                        actionBeginArgs.originalEvent.preventDefault();
                    }
                });
            };
            processFile(0);
        };
        Audio.prototype.uploadMethod = function (dragEvent, audioElement, fileIndex) {
            var _this = this;
            if (fileIndex === void 0) { fileIndex = 0; }
            var popupObj = this.popupUploaderObj.renderPopup('Audios', audioElement);
            var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
            var timeOut = dragEvent.dataTransfer.files[fileIndex].size > 1000000 ? 300 : 100;
            var popupRefreshTimeout = setTimeout(function () {
                _this.popupUploaderObj.refreshPopup(audioElement, popupObj);
            }, timeOut);
            this.timeoutIds.push(popupRefreshTimeout);
            var uploadObj = this.popupUploaderObj.createUploader('Audios', dragEvent, audioElement, popupObj.element.childNodes[0], popupObj, fileIndex);
            var fileSelectWrap = popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap');
            Eif (fileSelectWrap) {
                fileSelectWrap.style.display = 'none';
            }
            range.selectNodeContents(audioElement);
            this.parent.formatter.editorManager.nodeSelection.setRange(this.contentModule.getDocument(), range);
        };
        Audio.prototype.audioPaste = function (args) {
            var _this = this;
            var files = [];
            Eif (Array.isArray(args.file)) {
                files = args.file;
            }
            else if (args.file instanceof File) {
                files = [args.file];
            }
            Eif (args.text.length === 0 && files.length > 0) {
                var proxy_1 = this;
                args.args.preventDefault();
                var doc_1 = proxy_1.parent.contentModule.getDocument();
                var _loop_3 = function (i) {
                    var file = files[i];
                    var reader = new FileReader();
                    reader.addEventListener('load', function () {
                        var url = proxy_1.parent.insertAudioSettings.saveFormat === 'Base64' || !ej2_base_2.isNullOrUndefined(args.callBack) ?
                            reader.result : URL.createObjectURL(util_2.convertToBlob(reader.result));
                        var audioCommandArgs = {
                            cssClass: (proxy_1.parent.insertAudioSettings.layoutOption === 'Inline' ?
                                classes.CLS_AUDIOINLINE : classes.CLS_AUDIOBREAK),
                            url: url,
                            fileName: file.name
                        };
                        if (!ej2_base_2.isNullOrUndefined(args.callBack)) {
                            args.callBack(audioCommandArgs);
                            return;
                        }
                        else {
                            proxy_1.parent.formatter.process(proxy_1.parent, { item: { command: 'Audios', subCommand: 'Audio' } }, args.args, audioCommandArgs);
                            var audioWraps = doc_1.querySelectorAll('.e-audio-wrap');
                            if (audioWraps && audioWraps.length > 0) {
                                var lastWrap = audioWraps[audioWraps.length - 1];
                                var range = doc_1.createRange();
                                range.setStartAfter(lastWrap);
                                range.collapse(true);
                                var sel = _this.parent.contentModule.getDocument().getSelection();
                                Eif (sel) {
                                    sel.removeAllRanges();
                                    sel.addRange(range);
                                }
                            }
                        }
                    });
                    reader.readAsDataURL(file);
                };
                for (var i = 0; i < files.length; i++) {
                    _loop_3(i);
                }
            }
        };
        Audio.prototype.cancelDialog = function (e) {
            this.parent.isBlur = false;
            this.dialogObj.hide({ returnValue: true });
            Iif (this.isAudioUploaded) {
                this.uploadObj.removing();
            }
        };
        Audio.prototype.insertAudioUrl = function (e) {
            var proxy = this.selfAudio;
            proxy.isAudioUploaded = false;
            var url = proxy.inputUrl.value;
            if (e.target && e.target.nodeName === 'BUTTON' && e.target.classList.contains('e-updateAudio')) {
                var element = this.selectParent && this.selectParent[0] && this.selectParent[0].nodeName === 'SPAN' && this.selectParent[0].classList.contains('e-clickelem') ?
                    this.selectParent[0] : null;
                var args = {
                    element: element,
                    src: url
                };
                proxy.parent.trigger(events.afterMediaDelete, args);
            }
            if (proxy.parent.formatter.getUndoRedoStack().length === 0) {
                proxy.parent.formatter.saveData();
            }
            if (!ej2_base_1.isNullOrUndefined(proxy.uploadUrl) && proxy.uploadUrl.url !== '') {
                proxy.uploadUrl.cssClass = (proxy.parent.insertAudioSettings.layoutOption === 'Inline' ?
                    classes.CLS_AUDIOINLINE : classes.CLS_AUDIOBREAK);
                proxy.dialogObj.hide({ returnValue: false });
                Iif (proxy.dialogObj !== null) {
                    return;
                }
                proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, proxy.uploadUrl);
                proxy.uploadUrl.url = '';
            }
            else Eif (url !== '') {
                if (proxy.parent.editorMode === 'HTML' && ej2_base_1.isNullOrUndefined(ej2_base_2.closest(this.selection.range.startContainer.parentNode, '[id=' + "'" + proxy.contentModule.getPanel().id + "'" + ']')) && !(proxy.parent.iframeSettings.enable)) {
                    proxy.contentModule.getEditPanel().focus();
                    var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.contentModule.getDocument());
                    this.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.contentModule.getDocument());
                    this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
                }
                var name_1;
                Eif (proxy.parent.editorMode === 'HTML') {
                    var parts = url.split('/');
                    name_1 = parts[parts.length - 1];
                }
                var value = {
                    cssClass: (proxy.parent.insertAudioSettings.layoutOption === 'Inline' ? classes.CLS_AUDIOINLINE : classes.CLS_AUDIOBREAK),
                    url: url, selection: this.selection, fileName: name_1,
                    selectParent: this.selectParent
                };
                proxy.dialogObj.hide({ returnValue: false });
                if (proxy.dialogObj !== null) {
                    return;
                }
                proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, value);
            }
        };
        Audio.prototype.destroy = function () {
            if (this.isDestroyed) {
                return;
            }
            this.prevSelectedAudEle = undefined;
            if (this.showPopupTime) {
                clearTimeout(this.showPopupTime);
                this.showPopupTime = null;
            }
            if (!ej2_base_1.isNullOrUndefined(this.audioDragPopupTime)) {
                clearTimeout(this.audioDragPopupTime);
                this.audioDragPopupTime = null;
            }
            if (!ej2_base_1.isNullOrUndefined(this.showAudioQTbarTime)) {
                clearTimeout(this.showAudioQTbarTime);
                this.showAudioQTbarTime = null;
            }
            this.timeoutIds.forEach(function (id) {
                clearTimeout(id);
            });
            this.timeoutIds = [];
            this.removeEventListener();
            this.clearDialogObj();
            this.isDestroyed = true;
            this.onDocumentClickBoundFn = null;
        };
        Audio.prototype.getModuleName = function () {
            return 'audio';
        };
        return Audio;
    }());
    exports.Audio = Audio;
});