@capillarytech/creatives-library 7.14.11 → 7.14.12

package/config/app.js

@@ -16,7 +16,8 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    //api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.14.11",
+  "version": "7.14.12",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -28,6 +28,7 @@
     "node-html-parser": "^5.4.2-0",
     "normalizr": "^3.2.3",
     "papaparse": "^5.3.1",
+    "pdfjs-dist": "^2.3.200",
     "pre-push": "^0.1.2",
     "react-datepicker": "^0.46.0",
     "react-dropzone": "^11.3.4",

package/v2Components/CapDocumentUpload/index.js

@@ -11,6 +11,7 @@ import { injectIntl, FormattedMessage, intlShape} from 'react-intl';
 import { isEmpty, get } from 'lodash';
 import './index.scss';
 import messages from './messages';
+const PDFJS = require("pdfjs-dist");
 
 function CapDocumentUpload(props) {
   const {
@@ -39,13 +40,11 @@ function CapDocumentUpload(props) {
   useEffect(() => {
     const docDataObj = documentData[`uploadedAssetData${index}`];
     if (!isEmpty(docDataObj)) {
-      const { secure_file_path = '', karixFileHandle = '', name = '', file_size = '' } = get(docDataObj, 'metaInfo', {});
+      const { secure_file_path = '', karixFileHandle = '', name = '', file_size = ''} = get(docDataObj, 'metaInfo', {});
       setWhatsappDocParams({
         ...whatsappDocParams,
         whatsappDocName: name,
         whatsappDocSize: file_size,
-        whatsappDocPages: 2,
-        whatsappDocImg: 'https://play-lh.googleusercontent.com/BkRfMfIRPR9hUnmIYGDgHHKjow-g18-ouP6B2ko__VnyUHSi1spcc78UtZ4sVUtBH4g',
       });
       updateDocumentSrc(secure_file_path, karixFileHandle);
     }
@@ -81,12 +80,46 @@ function CapDocumentUpload(props) {
     const fileParams = {
       error: false, // checking error based on file size
     };
+    convertPdfToImages(file);
     submitAction({file, type: 'document', fileParams}, incorrectFile);
     if (e) {
       const event = e;
       event.target.value = null;
     }
   }, []);
+  const readFileData = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      resolve(e.target.result);
+    };
+    reader.onerror = (err) => {
+      reject(err);
+    };
+    reader.readAsDataURL(file);
+  });
+  const convertPdfToImages = async (file) => {
+    const data = await readFileData(file);
+    return PDFJS.getDocument(data)
+    .then(async function (pdf) {
+      const numberOfPages = pdf.numPages;
+      const canvas = document.createElement("canvas");
+      const page = await pdf.getPage(1);
+      const viewport = page.getViewport({ scale: 1 });
+      const context = canvas.getContext("2d");
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      await page.render({ canvasContext: context, viewport: viewport }).promise;
+      const image = (canvas.toDataURL('image/jpeg', 1.0));
+      canvas.remove();
+      setWhatsappDocParams({
+        ...whatsappDocParams,
+        whatsappDocImg: image,
+        whatsappDocPages: numberOfPages,
+      });
+      return image;
+    })
+    .catch((error) => Promise.reject(error));
+  };
 
   const submitAction = useCallback((data, incorrectFile) => {
     const {

package/v2Components/CapDocumentUpload/index.scss

@@ -65,5 +65,5 @@ $classPrefix: cap-custom-document-upload;
   
 }
 .document-div {
-  padding-top: '20px';
+  padding-top: 20px;
 }

package/v2Components/CapVideoUpload/index.js

@@ -242,7 +242,7 @@ function CapVideoUpload(props) {
             <FormattedMessage {...messages.imageReUpload} />
           </CapButton>
         </div>
-        <div className={channel === WHATSAPP ? 'video-panel-wp' : 'video-panel'}>
+        <div className="video-panel">
           <video
             width="230"
             poster={previewUrl}
@@ -257,16 +257,14 @@ function CapVideoUpload(props) {
           >
             <source src={videoSrc} type="video/mp4" />
           </video>
-          { channel !== WHATSAPP &&
-            <div className="video-info">
-              <CapHeading type="h6">
-                {videoName}
-              </CapHeading>
-              <CapHeading type="h6">
-                {videoDuration}
-              </CapHeading>
-            </div>
-          }
+          <div className="video-info">
+            <CapHeading type="h6">
+              {videoName}
+            </CapHeading>
+            <CapHeading type="h6">
+              {videoDuration}
+            </CapHeading>
+          </div>
         </div>
       </Fragment>
     );

package/v2Containers/CreativesContainer/index.js

@@ -400,7 +400,10 @@ export class Creatives extends React.Component {
             case (WHATSAPP_MEDIA_TYPES.DOCUMENT):
               mediaParams = {
                 documentUrl: whatsappMedia?.url,
-                whatsappDocParams: whatsappMedia?.docParams,
+                whatsappDocParams: {
+                  ...whatsappMedia?.docParams,
+                  whatsappDocImg: whatsappMedia?.previewUrl,
+                },
               };
               break;
             default:
@@ -672,7 +675,12 @@ export class Creatives extends React.Component {
             case (WHATSAPP_MEDIA_TYPES.DOCUMENT):
               whatsappMedia = {
                 url: documentUrl,
-                docParams: whatsappDocParams,
+                previewUrl: whatsappDocParams?.whatsappDocImg,
+                docParams: {
+                  whatsappDocName: whatsappDocParams?.whatsappDocName,
+                  whatsappDocSize: whatsappDocParams?.whatsappDocSize,
+                  whatsappDocPages: whatsappDocParams?.whatsappDocPages,
+                },
               };
               break;
             default:

package/v2Containers/Whatsapp/styles.scss

@@ -29,7 +29,7 @@
     .pdf-name-div {
       display: flex;
       .pdf-name{
-        max-width: 112px;
+        max-width: 84px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;