-
-
Notifications
You must be signed in to change notification settings - Fork 351
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[mirotalksfu] - improve collaborative whiteboard
- Loading branch information
1 parent
06e62d4
commit d876180
Showing
6 changed files
with
132 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -44,7 +44,7 @@ dependencies: { | |
| * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon | ||
| * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970 | ||
| * @author Miroslav Pejic - [email protected] | ||
| * @version 1.4.81 | ||
| * @version 1.4.82 | ||
| * | ||
| */ | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h | |
| * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon | ||
| * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970 | ||
| * @author Miroslav Pejic - [email protected] | ||
| * @version 1.4.81 | ||
| * @version 1.4.82 | ||
| * | ||
| */ | ||
|
|
||
|
|
@@ -69,8 +69,8 @@ const Base64Prefix = 'data:application/pdf;base64,'; | |
|
|
||
| const wbImageInput = 'image/*'; | ||
| const wbPdfInput = 'application/pdf'; | ||
| const wbWidth = 1200; | ||
| const wbHeight = 600; | ||
| const wbWidth = 1280; | ||
| const wbHeight = 768; | ||
|
|
||
| const swalImageUrl = '../images/pricing-illustration.svg'; | ||
|
|
||
|
|
@@ -3165,75 +3165,10 @@ function whiteboardAddObj(type) { | |
| }); | ||
| break; | ||
| case 'imgFile': | ||
| Swal.fire({ | ||
| allowOutsideClick: false, | ||
| background: swalBackground, | ||
| position: 'center', | ||
| title: 'Select the image', | ||
| input: 'file', | ||
| inputAttributes: { | ||
| accept: wbImageInput, | ||
| 'aria-label': 'Select the image', | ||
| }, | ||
| showDenyButton: true, | ||
| confirmButtonText: `OK`, | ||
| denyButtonText: `Cancel`, | ||
| showClass: { popup: 'animate__animated animate__fadeInDown' }, | ||
| hideClass: { popup: 'animate__animated animate__fadeOutUp' }, | ||
| }).then((result) => { | ||
| if (result.isConfirmed) { | ||
| let wbCanvasImg = result.value; | ||
| if (wbCanvasImg && wbCanvasImg.size > 0) { | ||
| let reader = new FileReader(); | ||
| reader.onload = function (event) { | ||
| let imgObj = new Image(); | ||
| imgObj.src = event.target.result; | ||
| imgObj.onload = function () { | ||
| let image = new fabric.Image(imgObj); | ||
| image.set({ top: 0, left: 0 }).scale(0.3); | ||
| addWbCanvasObj(image); | ||
| }; | ||
| }; | ||
| reader.readAsDataURL(wbCanvasImg); | ||
| } else { | ||
| userLog('error', 'File not selected or empty', 'top-end'); | ||
| } | ||
| } | ||
| }); | ||
| setupFileSelection('Select the image', wbImageInput, renderImageToCanvas); | ||
| break; | ||
| case 'pdfFile': | ||
| Swal.fire({ | ||
| allowOutsideClick: false, | ||
| background: swalBackground, | ||
| position: 'center', | ||
| title: 'Select the PDF', | ||
| input: 'file', | ||
| inputAttributes: { | ||
| accept: wbPdfInput, | ||
| 'aria-label': 'Select the PDF', | ||
| }, | ||
| showDenyButton: true, | ||
| confirmButtonText: `OK`, | ||
| denyButtonText: `Cancel`, | ||
| showClass: { popup: 'animate__animated animate__fadeInDown' }, | ||
| hideClass: { popup: 'animate__animated animate__fadeOutUp' }, | ||
| }).then((result) => { | ||
| if (result.isConfirmed) { | ||
| let wbCanvasPdf = result.value; | ||
| if (wbCanvasPdf && wbCanvasPdf.size > 0) { | ||
| let reader = new FileReader(); | ||
| reader.onload = async function (event) { | ||
| wbCanvas.requestRenderAll(); | ||
| await pdfToImage(event.target.result, wbCanvas); | ||
| whiteboardIsDrawingMode(false); | ||
| wbCanvasToJson(); | ||
| }; | ||
| reader.readAsDataURL(wbCanvasPdf); | ||
| } else { | ||
| userLog('error', 'File not selected or empty', 'top-end'); | ||
| } | ||
| } | ||
| }); | ||
| setupFileSelection('Select the PDF', wbPdfInput, renderPdfToCanvas); | ||
| break; | ||
| case 'text': | ||
| const text = new fabric.IText('Lorem Ipsum', { | ||
|
|
@@ -3294,6 +3229,106 @@ function whiteboardAddObj(type) { | |
| } | ||
| } | ||
|
|
||
| function setupFileSelection(title, accept, renderToCanvas) { | ||
| Swal.fire({ | ||
| allowOutsideClick: false, | ||
| background: swalBackground, | ||
| position: 'center', | ||
| title: title, | ||
| input: 'file', | ||
| html: ` | ||
| <div id="dropArea"> | ||
| <p>Drag and drop your file here</p> | ||
| </div> | ||
| `, | ||
| inputAttributes: { | ||
| accept: accept, | ||
| 'aria-label': title, | ||
| }, | ||
| didOpen: () => { | ||
| const dropArea = document.getElementById('dropArea'); | ||
| dropArea.addEventListener('dragenter', handleDragEnter); | ||
| dropArea.addEventListener('dragover', handleDragOver); | ||
| dropArea.addEventListener('dragleave', handleDragLeave); | ||
| dropArea.addEventListener('drop', handleDrop); | ||
| }, | ||
| showDenyButton: true, | ||
| confirmButtonText: `OK`, | ||
| denyButtonText: `Cancel`, | ||
| showClass: { popup: 'animate__animated animate__fadeInDown' }, | ||
| hideClass: { popup: 'animate__animated animate__fadeOutUp' }, | ||
| }).then((result) => { | ||
| if (result.isConfirmed) { | ||
| renderToCanvas(result.value); | ||
| } | ||
| }); | ||
|
|
||
| function handleDragEnter(e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| e.target.style.background = 'var(--body-bg)'; | ||
| } | ||
|
|
||
| function handleDragOver(e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| e.dataTransfer.dropEffect = 'copy'; | ||
| } | ||
|
|
||
| function handleDragLeave(e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| e.target.style.background = ''; | ||
| } | ||
|
|
||
| function handleDrop(e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| const dt = e.dataTransfer; | ||
| const files = dt.files; | ||
| handleFiles(files); | ||
| e.target.style.background = ''; | ||
| } | ||
|
|
||
| function handleFiles(files) { | ||
| if (files.length > 0) { | ||
| const file = files[0]; | ||
| console.log('Selected file:', file); | ||
| Swal.close(); | ||
| renderToCanvas(file); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function renderImageToCanvas(wbCanvasImg) { | ||
| if (wbCanvasImg && wbCanvasImg.size > 0) { | ||
| let reader = new FileReader(); | ||
| reader.onload = function (event) { | ||
| let imgObj = new Image(); | ||
| imgObj.src = event.target.result; | ||
| imgObj.onload = function () { | ||
| let image = new fabric.Image(imgObj); | ||
| image.set({ top: 0, left: 0 }).scale(0.3); | ||
| addWbCanvasObj(image); | ||
| }; | ||
| }; | ||
| reader.readAsDataURL(wbCanvasImg); | ||
| } | ||
| } | ||
|
|
||
| async function renderPdfToCanvas(wbCanvasPdf) { | ||
| if (wbCanvasPdf && wbCanvasPdf.size > 0) { | ||
| let reader = new FileReader(); | ||
| reader.onload = async function (event) { | ||
| wbCanvas.requestRenderAll(); | ||
| await pdfToImage(event.target.result, wbCanvas); | ||
| whiteboardIsDrawingMode(false); | ||
| wbCanvasToJson(); | ||
| }; | ||
| reader.readAsDataURL(wbCanvasPdf); | ||
| } | ||
| } | ||
|
|
||
| function readBlob(blob) { | ||
| return new Promise((resolve, reject) => { | ||
| const reader = new FileReader(); | ||
|
|
@@ -4065,7 +4100,7 @@ function showAbout() { | |
| imageUrl: image.about, | ||
| customClass: { image: 'img-about' }, | ||
| position: 'center', | ||
| title: 'WebRTC SFU v1.4.81', | ||
| title: 'WebRTC SFU v1.4.82', | ||
| html: ` | ||
| <br /> | ||
| <div id="about"> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,7 +9,7 @@ | |
| * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon | ||
| * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970 | ||
| * @author Miroslav Pejic - [email protected] | ||
| * @version 1.4.81 | ||
| * @version 1.4.82 | ||
| * | ||
| */ | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters