diff --git a/assets/img/Android/1.png b/assets/img/Android/1.png index 2fa82466..d19cb650 100644 Binary files a/assets/img/Android/1.png and b/assets/img/Android/1.png differ diff --git a/assets/img/Android/1copy.png b/assets/img/Android/1copy.png index 78e096ca..e66b1457 100644 Binary files a/assets/img/Android/1copy.png and b/assets/img/Android/1copy.png differ diff --git a/assets/img/Android/2.png b/assets/img/Android/2.png index bb1ffc25..8b2ed8d3 100644 Binary files a/assets/img/Android/2.png and b/assets/img/Android/2.png differ diff --git a/assets/img/Android/2copy.png b/assets/img/Android/2copy.png index 719da19c..b23b80b6 100644 Binary files a/assets/img/Android/2copy.png and b/assets/img/Android/2copy.png differ diff --git a/assets/img/Android/3.png b/assets/img/Android/3.png index 47874840..66654efd 100644 Binary files a/assets/img/Android/3.png and b/assets/img/Android/3.png differ diff --git a/assets/img/Android/3copy.png b/assets/img/Android/3copy.png index 030f71e5..e702dc1d 100644 Binary files a/assets/img/Android/3copy.png and b/assets/img/Android/3copy.png differ diff --git a/assets/img/Android/4.png b/assets/img/Android/4.png index 130092b0..625e3169 100644 Binary files a/assets/img/Android/4.png and b/assets/img/Android/4.png differ diff --git a/assets/img/Android/4copy.png b/assets/img/Android/4copy.png index c05fab81..a1c168f7 100644 Binary files a/assets/img/Android/4copy.png and b/assets/img/Android/4copy.png differ diff --git a/assets/img/Android/5.png b/assets/img/Android/5.png index f0e0dcea..6b5b1a5c 100644 Binary files a/assets/img/Android/5.png and b/assets/img/Android/5.png differ diff --git a/assets/img/Android/5copy.png b/assets/img/Android/5copy.png index 7adea8d2..4585b8e2 100644 Binary files a/assets/img/Android/5copy.png and b/assets/img/Android/5copy.png differ diff --git a/assets/img/Android/6.png b/assets/img/Android/6.png index f7402f7c..ef8790f5 100644 Binary files a/assets/img/Android/6.png and b/assets/img/Android/6.png differ diff --git a/assets/img/Android/6copy.png b/assets/img/Android/6copy.png index a92c7d95..cbea509f 100644 Binary files a/assets/img/Android/6copy.png and b/assets/img/Android/6copy.png differ diff --git a/assets/img/iOS/Frame1.png b/assets/img/iOS/Frame1.png index 94afaaf4..fdd683eb 100644 Binary files a/assets/img/iOS/Frame1.png and b/assets/img/iOS/Frame1.png differ diff --git a/assets/img/iOS/Frame1_lazy.png b/assets/img/iOS/Frame1_lazy.png index 411b395b..690b1d29 100644 Binary files a/assets/img/iOS/Frame1_lazy.png and b/assets/img/iOS/Frame1_lazy.png differ diff --git a/assets/img/iOS/Frame2.png b/assets/img/iOS/Frame2.png index d09812a5..ce8d3fa8 100644 Binary files a/assets/img/iOS/Frame2.png and b/assets/img/iOS/Frame2.png differ diff --git a/assets/img/iOS/Frame2_lazy.png b/assets/img/iOS/Frame2_lazy.png index ec75f72a..8ed1c188 100644 Binary files a/assets/img/iOS/Frame2_lazy.png and b/assets/img/iOS/Frame2_lazy.png differ diff --git a/assets/img/iOS/Frame3.png b/assets/img/iOS/Frame3.png index f9e787c6..be96775d 100644 Binary files a/assets/img/iOS/Frame3.png and b/assets/img/iOS/Frame3.png differ diff --git a/assets/img/iOS/Frame3_lazy.png b/assets/img/iOS/Frame3_lazy.png index 5709d2b7..e3b4c190 100644 Binary files a/assets/img/iOS/Frame3_lazy.png and b/assets/img/iOS/Frame3_lazy.png differ diff --git a/assets/img/iOS/Frame4.png b/assets/img/iOS/Frame4.png index b353842e..ac3df457 100644 Binary files a/assets/img/iOS/Frame4.png and b/assets/img/iOS/Frame4.png differ diff --git a/assets/img/iOS/Frame4_lazy.png b/assets/img/iOS/Frame4_lazy.png index 7d651165..695c3e3e 100644 Binary files a/assets/img/iOS/Frame4_lazy.png and b/assets/img/iOS/Frame4_lazy.png differ diff --git a/assets/img/iOS/Frame5.png b/assets/img/iOS/Frame5.png index 7ab29880..4f778a0e 100644 Binary files a/assets/img/iOS/Frame5.png and b/assets/img/iOS/Frame5.png differ diff --git a/assets/img/iOS/Frame5_lazy.png b/assets/img/iOS/Frame5_lazy.png index 369ee4f3..1b045483 100644 Binary files a/assets/img/iOS/Frame5_lazy.png and b/assets/img/iOS/Frame5_lazy.png differ diff --git a/assets/img/iOS/Frame6.png b/assets/img/iOS/Frame6.png index 11d97f48..9405bc4a 100644 Binary files a/assets/img/iOS/Frame6.png and b/assets/img/iOS/Frame6.png differ diff --git a/assets/img/iOS/Frame6_lazy.png b/assets/img/iOS/Frame6_lazy.png index 052c8c4f..d2324ac7 100644 Binary files a/assets/img/iOS/Frame6_lazy.png and b/assets/img/iOS/Frame6_lazy.png differ diff --git a/assets/img/iOS/Frame7.png b/assets/img/iOS/Frame7.png index 92b59316..c792718f 100644 Binary files a/assets/img/iOS/Frame7.png and b/assets/img/iOS/Frame7.png differ diff --git a/assets/img/iOS/Frame7_lazy.png b/assets/img/iOS/Frame7_lazy.png index 7ac86998..b76cebd2 100644 Binary files a/assets/img/iOS/Frame7_lazy.png and b/assets/img/iOS/Frame7_lazy.png differ diff --git a/assets/img/iOS/Frame8.png b/assets/img/iOS/Frame8.png deleted file mode 100644 index 649e6930..00000000 Binary files a/assets/img/iOS/Frame8.png and /dev/null differ diff --git a/assets/img/iOS/Frame8_lazy.png b/assets/img/iOS/Frame8_lazy.png deleted file mode 100644 index 3b642635..00000000 Binary files a/assets/img/iOS/Frame8_lazy.png and /dev/null differ diff --git a/components/ExportExplainer.vue b/components/ExportExplainer.vue index 29272ed5..91695e1c 100644 --- a/components/ExportExplainer.vue +++ b/components/ExportExplainer.vue @@ -28,6 +28,16 @@ @click.native.stop="tabStatus = [i, i]" > + add to Homescreen @@ -41,7 +51,6 @@ " color="#07bc4c" class="text-md-h6 text-caption ml-10 white--text" - style="max-width: 100%" > mdi-arrow-right Select file via box above. @@ -65,8 +74,7 @@ :key="idx" @click.native.stop="increaseTabstatus()" > - - + ({ + deferredPrompt: null, + installButtonStatus: false, tabStatus: [0, 0], tab: navigator.platform.toLowerCase().includes("ios") || @@ -139,54 +149,47 @@ export default { imgLazy: iOS_img1_lazy, text: "", x: "50%", - y: "20%", + y: "10%", }, { img: iOS_img2, imgLazy: iOS_img2_lazy, text: "", x: "50%", - y: "10%", + y: "88%", }, { img: iOS_img3, imgLazy: iOS_img3_lazy, text: "", - x: "50%", - y: "88%", + x: "20%", + y: "61%", }, { img: iOS_img4, imgLazy: iOS_img4_lazy, text: "", - x: "20%", - y: "61%", + x: "50%", + y: "76%", }, { img: iOS_img5, imgLazy: iOS_img5_lazy, text: "", x: "50%", - y: "76%", + y: "63%", }, { img: iOS_img6, imgLazy: iOS_img6_lazy, text: "", x: "50%", - y: "63%", + y: "32%", }, { img: iOS_img7, imgLazy: iOS_img7_lazy, text: "", - x: "85%", - y: "11%", - }, - { - img: iOS_img8, - imgLazy: iOS_img8_lazy, - text: "", x: "50%", y: "81.5%", }, @@ -194,11 +197,7 @@ export default { tabItems: [ { text: - "On iPhone open WhatsApp and tap on the chat you would like to export.", - }, - { - text: - "Tap on the name of the chat at the top to open Group/Chat Info.", + "On iPhone open WhatsApp and the chat or group chat you would like to export > at the top tap on the name of the chat.", }, { text: @@ -216,7 +215,7 @@ export default { }, { text: - "Finally select On my iPhone to save it locally.", + "Finally select On my iPhone and save to save it locally.", }, { text: @@ -232,14 +231,14 @@ export default { img: img1, imgLazy: img1_lazy, text: "", - x: "50%", - y: "18%", + x: "78%", + y: "51%", }, { img: img2, imgLazy: img2_lazy, text: "", - x: "50%", + x: "89%", y: "13%", }, { @@ -260,18 +259,25 @@ export default { img: img5, imgLazy: img5_lazy, text: "", - x: "27%", - y: "50%", + x: "67%", + y: "48%", + }, + { + img: img6, + imgLazy: img6_lazy, + text: "", + x: "14%", + y: "73%", }, ], tabItems: [ { text: - "On your Android phone open WhatsApp and tap on the chat you would like to export.", + "On your Android phone open this Website in Chrome and tap on the button add to Homescreen and press install", }, { text: - "Tap on the name of the chat at the top to open the Group/Chat Info.", + "Open WhatsApp and tap on the chat you would like to export > tap on the three-dots at the top right corner.", }, { text: "In the new menu tap on More.", @@ -281,7 +287,11 @@ export default { }, { text: - "Choose Without Media and send the file yourself via E-Mail or save it to Google Drive.", + "Choose Without Media or Include Media if you want to include your images and other files in the export.", + }, + { + text: + "Now in the sharing view tap on Whatsanalyze or alternatively if you skipped step 1 send it to your self via E-Mail or save it to Google Drive.", }, ], }, @@ -294,6 +304,46 @@ export default { a[this.tab] = Math.min(a[this.tab] + 1, maxValue); this.tabStatus = a; }, + async downloadPWA() { + { + // Hide the app provided install promotion + this.showInstallPromotion(false); + // Show the install prompt + if (this.deferredPrompt) { + this.deferredPrompt.prompt(); + // Wait for the user to respond to the prompt + const { outcome } = await this.deferredPrompt.userChoice; + // Optionally, send analytics event with outcome of user choice + + this.$gtag.event("PWA install", { + event_category: "home", + event_label: "lead", + value: outcome, + }); + + // We've used the prompt, and can't use it again, throw it away + this.deferredPrompt = null; + } + } + }, + // eslint-disable-next-line no-unused-vars + showInstallPromotion(status) { + this.installButtonStatus = status; + }, + catchPWA() { + window.addEventListener("beforeinstallprompt", (e) => { + // Prevent the mini-infobar from appearing on mobile + e.preventDefault(); + // Stash the event so it can be triggered later. + this.deferredPrompt = e; + // Update UI notify the user they can install the PWA + this.showInstallPromotion(true); + // Optionally, send analytics event that PWA install promo was shown. + }); + }, + }, + created() { + this.catchPWA(); }, }; @@ -315,6 +365,7 @@ export default { z-index: 99999; top: 2px; } + .blinking { animation-name: blink; animation-duration: 2s;