added translations and call counter

SpiritFour · Jan 9, 2025 · 9711c43 · 9711c43
1 parent 202df8e
commit 9711c43
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 167 deletions.
diff --git a/assets/pdf-fonts/jsPDF b/assets/pdf-fonts/jsPDF
diff --git a/components/ChatVisualization/PdfDownloadPopup.vue b/components/ChatVisualization/PdfDownloadPopup.vue
@@ -155,6 +155,7 @@ import PDFWorker from "worker-loader!~/assets/js/pdf.worker.js";
 import { loadImage, objectToDictionary } from "~/utils/utils";
 import { saveAs } from "file-saver";
 import SubscriptionChecker from "~/components/SubscriptionChecker.vue";
+import { Chat } from "~/utils/transformChatData";
 
 export default {
   name: "PdfDownload",
@@ -209,6 +210,7 @@ export default {
 
         const chat = objectToDictionary(this.chat); // remove functions
         chat.funFacts = await this.chat.getFunFacts(); // set funfacts beforehand instead of using function call
+        chat.totalCalls = Chat.getTotalCallMinutes(this.chat.chatObject);
 
         worker.postMessage({
           // pass all data to service worker

diff --git a/components/charts/TextStats.vue b/components/charts/TextStats.vue
@@ -1,93 +1,136 @@
 <template>
   <v-container class="px-6">
-    <!-- First and last contact -->
-
-    <v-row class="my-7 text-left">
-      <v-col cols="12" class="text-h5 text-md-h4 font-weight-bold pa-0"
-        >{{ $t("firstMessage") }}
-      </v-col>
-      <div class="font-weight-bold text-h3 text-md-h2">
-        {{ firstDateString }}
-      </div>
-    </v-row>
-
-    <v-row class="my-7 text-right">
-      <div class="text-md-h2 text-h3 font-weight-bold ml-auto">
-        {{ lastDateString }}
-      </div>
-      <v-col cols="12" class="text-h5 text-md-h4 font-weight-bold pa-0"
-        >{{ $t("lastMessage") }}
-      </v-col>
-    </v-row>
-
-    <!-- Days you are chatting -->
-    <v-row class="white--text">
-      <v-col class="cyan darken-2 fact-box py-10" cols="12" sm="6">
-        <v-icon v-show="$vuetify.breakpoint.mdAndUp" size="100"
-          >mdi-calendar</v-icon
+    <v-row class="white--text" align="stretch">
+      <!-- 1st box -->
+      <v-col
+        class="cyan darken-2 fact-box py-10 h-100 position-relative"
+        cols="12"
+        sm="4"
+      >
+        <!-- Icon in the top-left corner -->
+        <v-icon
+          v-show="$vuetify.breakpoint.mdAndUp"
+          color="black"
+          size="50"
+          style="position: absolute; top: 10px; left: 10px;"
         >
-        <v-row>
+          mdi-calendar
+        </v-icon>
+
+        <!-- "You chatted for" -->
+        <v-row class="mt-4">
           <v-col
             cols="12"
             class="text-h5 font-weight-bold pa-0 ma-0 text-center"
           >
-            {{ $t("youChatted") }}
+            {{ $t("youChattedFor") }}
           </v-col>
         </v-row>
 
+        <!-- Big number: dateDiffs -->
         <v-row>
           <v-col class="text-h1 font-weight-bold text-center pa-0">
             {{ dateDiffs }}
           </v-col>
         </v-row>
 
+        <!-- "days" -->
         <v-row>
-          <v-col cols="12" class="text-h5 font-weight-bold pa-0 text-center">
+          <v-col
+            cols="12"
+            class="text-h5 font-weight-bold pa-0 text-center"
+          >
             {{ $t("days") }}
           </v-col>
         </v-row>
       </v-col>
 
-      <v-col class="amber darken-1 fact-box py-10" cols="12" sm="6">
+      <!-- 2nd box -->
+      <v-col
+        class="amber darken-1 fact-box py-10 h-100 position-relative"
+        cols="12"
+        sm="4"
+      >
         <v-icon
           v-show="$vuetify.breakpoint.mdAndUp"
-          color="yellow accent-1"
-          size="100"
-          >mdi-android-messages</v-icon
+          color="black"
+          size="50"
+          style="position: absolute; top: 10px; left: 10px;"
         >
-        <v-row>
+          mdi-android-messages
+        </v-icon>
+
+        <!-- "You have sent" -->
+        <v-row class="mt-4">
           <v-col
             cols="12"
             class="text-h5 font-weight-bold pa-0 ma-0 text-center"
           >
-            {{ $t("youSent") }}
+            {{ $t("youHaveSent") }}
           </v-col>
         </v-row>
+
+        <!-- Big number: totalMessages -->
         <v-row>
           <v-col class="text-h1 font-weight-bold text-center pa-0">
             {{ totalMessages }}
           </v-col>
         </v-row>
+
+        <!-- "Messages" -->
         <v-row>
           <v-col class="text-h5 font-weight-bold pa-0 text-center">
             {{ $t("messages") }}
           </v-col>
         </v-row>
       </v-col>
-    </v-row>
 
-    <!-- Total message count -->
+      <!-- 3rd box -->
+      <v-col
+        class="pink darken-1 fact-box py-10 h-100 position-relative"
+        cols="12"
+        sm="4"
+      >
+        <v-icon
+          v-show="$vuetify.breakpoint.mdAndUp"
+          color="black"
+          size="50"
+          style="position: absolute; top: 10px; left: 10px;"
+        >
+          mdi-phone
+        </v-icon>
 
-    <!-- Most acrive day -->
+        <!-- "You called for" -->
+        <v-row class="mt-4">
+          <v-col
+            cols="12"
+            class="text-h5 font-weight-bold pa-0 ma-0 text-center"
+          >
+            {{ $t("youCalledFor") }}
+          </v-col>
+        </v-row>
 
-    <!-- Total Word count -->
+        <!-- Big number: totalCallMinutes -->
+        <v-row>
+          <v-col class="text-h1 font-weight-bold text-center pa-0">
+            {{ totalCallMinutes }}
+          </v-col>
+        </v-row>
 
-    <!-- Totlal Images/Audio etc shared -->
+        <!-- "minutes" -->
+        <v-row>
+          <v-col class="text-h5 font-weight-bold pa-0 text-center">
+            {{ $t("minutes") }}
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
 import { dateDiffs, firstDate, getDateString, lastDate } from "~/utils/utils";
+import { Chat } from "~/utils/transformChatData";
 
 export default {
   props: ["chat"],
@@ -110,6 +153,9 @@ export default {
     totalMessages() {
       return this.chat.chatObject.length;
     },
+    totalCallMinutes() {
+      return Chat.getTotalCallMinutes(this.chat.chatObject);
+    },
   },
   data() {
     return {};

diff --git a/utils/pdf.ts b/utils/pdf.ts
@@ -228,6 +228,7 @@ export async function render(
   addPageIfNeeded(50);
   writeDoubleSizeText(String(dateDiffsConst), " days");
   writeDoubleSizeText(String(chat.chatObject.length), " messages");
+  writeDoubleSizeText(String(chat.totalCalls), " minutes called");
   writeDoubleSizeText(String(chat.numPersonsInChat), " people");
 
   //    Add participants

diff --git a/utils/transformChatData.js b/utils/transformChatData.js
@@ -26,6 +26,29 @@ export class Chat {
     );
   }
 
+  static getTotalCallMinutes(chatObject) {
+    // Regex captures:
+    //   1) "Voice" or "Video"
+    //   2) optional spaces and a possible left-to-right mark (\u200E)
+    //   3) digits
+    //   4) optional spaces
+    //   5) "min"
+    // Example lines:
+    //   "Voice call. ‎5 min"
+    //   "Video call. 10 min"
+    const callRegex = /(Voice|Video) call\.\s*\u200E?(\d+)\s*min/;
+
+    let totalMinutes = 0;
+    for (const msg of chatObject) {
+      const match = msg.message.match(callRegex);
+      if (match) {
+        // match[2] is the number of minutes
+        totalMinutes += parseInt(match[2], 10);
+      }
+    }
+    return totalMinutes;
+  }
+
   // Find hapax legomenons, a word or an expression that occurs only once within the context.
   static uniqueWords(chat_distribution) {
     function singleOccurrence(value) {
@@ -444,6 +467,7 @@ export class Chat {
               "_omitted",
               "_weggelassen",
               "_attached",
+              "Messages and calls are end-to-end encrypted.",
             ].includes(word[0].toLowerCase())
           ) && word[1] > 1
       )