Merge pull request #80 from vivek-nexus/3.2.12

3.2.12

Author: vivek-nexus

README.md

@@ -5,7 +5,7 @@ Simple Google Meet transcripts. Private and open source.
 
 ![marquee-large](/assets/marquee-large.png)
 
-Extension status: 🟢 OPERATIONAL (v3.2.11)
+Extension status: 🟢 OPERATIONAL (v3.2.12)
 
 <br />
 <br />

extension-unpacked.zip

@@ -302,38 +302,66 @@ function transcriptMutationCallback(mutationsList) {
   mutationsList.forEach((mutation) => {
     try {
       if (mutation.type === "characterData") {
-        const currentPersonName = mutation.target.parentElement?.previousSibling?.textContent
-        const currentTranscriptText = mutation.target.parentElement?.textContent
-
-        if (currentPersonName && currentTranscriptText) {
-          // Attempt to dim down the transcript
-          mutation.target.parentElement?.parentElement?.setAttribute("style", "opacity:0.2")
-
-          // Starting fresh in a meeting
-          if (!transcriptTargetBuffer) {
-            transcriptTargetBuffer = mutation.target.parentElement
-            personNameBuffer = currentPersonName
-            timestampBuffer = new Date().toISOString()
-            transcriptTextBuffer = currentTranscriptText
-          }
-          // Some prior transcript buffer exists
-          else {
-            // New transcript UI block
-            if (transcriptTargetBuffer !== mutation.target.parentElement) {
-              // Push previous transcript block
-              pushBufferToTranscript()
-
-              // Update buffers for next mutation and store transcript block timestamp
-              transcriptTargetBuffer = mutation.target.parentElement
+        const mutationTargetElement = mutation.target.parentElement
+        const transcriptUIBlocks = [...mutationTargetElement?.parentElement?.parentElement?.children || []]
+        const isLastButSecondElement = transcriptUIBlocks[transcriptUIBlocks.length - 3] === mutationTargetElement?.parentElement ? true : false
+
+        // Pick up only last second element (the last and last but one are non transcript elements), since Meet mutates previous blocks to make minor corrections. Picking them up leads to repetitive transcript blocks in the result.
+        if (isLastButSecondElement) {
+          // Attempt to dim down the current transcript
+          [...transcriptUIBlocks[transcriptUIBlocks.length - 3].children].forEach((item) => {
+            item.setAttribute("style", "opacity:0.2")
+          })
+
+          const currentPersonName = mutationTargetElement?.previousSibling?.textContent
+          const currentTranscriptText = mutationTargetElement?.textContent
+
+          if (currentPersonName && currentTranscriptText) {
+            // Starting fresh in a meeting or resume from no active transcript
+            if (transcriptTextBuffer === "") {
               personNameBuffer = currentPersonName
               timestampBuffer = new Date().toISOString()
               transcriptTextBuffer = currentTranscriptText
             }
-            // Same transcript UI block being appended
+            // Some prior transcript buffer exists
             else {
-              // Update buffer for next mutation
-              transcriptTextBuffer = currentTranscriptText
+              // New person started speaking 
+              if (personNameBuffer !== currentPersonName) {
+                // Push previous person's transcript as a block
+                pushBufferToTranscript()
+
+                // Update buffers for next mutation and store transcript block timestamp
+                personNameBuffer = currentPersonName
+                timestampBuffer = new Date().toISOString()
+                transcriptTextBuffer = currentTranscriptText
+              }
+              // Same person speaking more
+              else {
+                // When the same person speaks for more than 30 min (approx), Meet drops very long transcript for current person and starts over, which is detected by current transcript string being significantly smaller than the previous one
+                if ((currentTranscriptText.length - transcriptTextBuffer.length) < -250) {
+                  // Push the long transcript
+                  pushBufferToTranscript()
+
+                  // Store transcript block timestamp for next transcript block of same person
+                  timestampBuffer = new Date().toISOString()
+                }
+
+                // Update buffers for next mutation
+                transcriptTextBuffer = currentTranscriptText
+              }
+            }
+          }
+          // No people found in transcript DOM
+          else {
+            // No transcript yet or the last person stopped speaking(and no one has started speaking next)
+            console.log("No active transcript")
+            // Push data in the buffer variables to the transcript array, but avoid pushing blank ones.
+            if ((personNameBuffer !== "") && (transcriptTextBuffer !== "")) {
+              pushBufferToTranscript()
             }
+            // Update buffers for the next person in the next mutation
+            personNameBuffer = ""
+            transcriptTextBuffer = ""
           }
         }
       }
@@ -433,7 +461,7 @@ function pushBufferToTranscript() {
 function pushUniqueChatBlock(chatBlock) {
   const isExisting = chatMessages.some(item =>
     (item.personName === chatBlock.personName) &&
-    (chatBlock.chatMessageText === item.chatMessageText)
+    (item.chatMessageText === chatBlock.chatMessageText)
   )
   if (!isExisting) {
     console.log(chatBlock)

extension/content.js

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TranscripTonic",
-  "version": "3.2.11",
+  "version": "3.2.12",
   "description": "Simple Google Meet transcripts. Private and open source.",
   "action": {
     "default_icon": "icon.png",

extension/icons/delete.svg

@@ -233,6 +233,10 @@
             align-items: center;
         }
 
+        #meetings-table-container {
+            overflow-x: auto;
+        }
+
         table {
             width: 100%;
             border-collapse: collapse;
@@ -267,24 +271,17 @@
             font-weight: bold
         }
 
-        .download-button {
+        .download-button,
+        .delete-button,
+        .post-button {
             background: transparent;
             color: #2A9ACA;
             border: none;
             padding: 0;
             display: flex;
             flex-direction: column;
             justify-content: end;
-        }
-
-        .post-button {
-            background: transparent;
-            color: #2A9ACA;
-            border: 1px solid #2A9ACA;
-            padding: 0.25rem 0.5rem;
-            display: flex;
-            gap: 0.25rem;
-            align-items: center;
+            font-size: smaller;
         }
 
         .card-heading {
@@ -367,7 +364,7 @@ <h2>Last 10 meetings</h2>
                             <th>Meeting software</th>
                             <th>Meeting start time and duration</th>
                             <th>Webhook status</th>
-                            <th>Actions</th>
+                            <th></th>
                         </tr>
                     </thead>
                     <tbody id="meetings-table">
@@ -376,7 +373,8 @@ <h2>Last 10 meetings</h2>
                 </table>
             </div>
             <button id="show-all" style="display: none;">Show
-                all</button>
+                all
+            </button>
         </section>
 
         <section id="webhooks">

extension/manifest.json

@@ -203,7 +203,9 @@ function loadMeetings() {
                     const row = document.createElement("tr")
                     row.innerHTML = `
                     <td>
+                        <div contenteditable="true" class="meeting-title" data-index="${i}" style="text-decoration: underline #a0a0a0; text-underline-offset: 6px;" title="Rename">
                         ${meeting.meetingTitle || meeting.title || "Google Meet call"}
+                    </div>
                     </td>
                     <td>
                      ${meeting.meetingSoftware ? meeting.meetingSoftware : ""} 
@@ -226,23 +228,36 @@ function loadMeetings() {
                         )()}
                     </td>
                     <td>
-                        <div style="min-width: 128px; display: flex; gap: 1rem;">
-                            <button class="download-button" data-index="${i}">
-                                <img src="./icons/download.svg" alt="Download this meeting transcript">
+                        <div style="display: flex; gap: 1rem; justify-content: end">
+                            <button class="download-button" data-index="${i}" title="Download" aria-label="Download this meeting transcript">
+                                <img src="./icons/download.svg" alt="">
                             </button>
-                            <button class="post-button" data-index="${i}">
-                                ${meeting.webhookPostStatus === "new" ? `Post` : `Repost`}
-                                <img src="./icons/webhook.svg" alt="" width="16px">
+                            <button class="post-button" data-index="${i}" title="${meeting.webhookPostStatus === "new" ? `Post webhook` : `Repost webhook`}" aria-label="${meeting.webhookPostStatus === "new" ? `` : ``}">
+                                ${meeting.webhookPostStatus === "new" ? `` : ``}
+                                <img src="./icons/webhook.svg" alt="">
+                            </button>
+                            &nbsp;
+                             <button class="delete-button" data-index="${i}" title="Delete" aria-label="Delete this meeting">
+                                <img src="./icons/delete.svg" alt="">
                             </button>
                         </div>
                     </td>
                 `
                     meetingsTable.appendChild(row)
 
-                    const meetingsTableContainer = document.querySelector("#meetings-table-container")
-                    if (!isMeetingsTableExpanded && meetingsTableContainer && (meetingsTableContainer.clientHeight > 320)) {
-                        meetingsTableContainer?.classList.add("fade-mask")
-                        document.querySelector("#show-all")?.setAttribute("style", "display: block")
+                    // Add event listener to meeting title input
+                    const meetingTitleInput = row.querySelector(".meeting-title")
+                    if (meetingTitleInput instanceof HTMLDivElement) {
+                        meetingTitleInput.addEventListener("blur", function () {
+                            const updatedMeeting = /** @type {Meeting} */ {
+                                ...meeting,
+                                meetingTitle: meetingTitleInput.innerText
+                            }
+                            meetings[i] = updatedMeeting
+                            chrome.storage.local.set({ meetings: meetings }, function () {
+                                console.log("Meeting title updated")
+                            })
+                        })
                     }
 
                     // Add event listener to the webhook post button
@@ -258,7 +273,6 @@ function loadMeetings() {
                             }
                             chrome.runtime.sendMessage(message, (responseUntyped) => {
                                 const response = /** @type {ExtensionResponse} */ (responseUntyped)
-                                loadMeetings()
                                 if (!response.success) {
                                     alert("Could not download transcript")
                                     const parsedError = /** @type {ErrorObject} */ (response.message)
@@ -314,6 +328,24 @@ function loadMeetings() {
                             })
                         })
                     }
+
+                    // Add event listener to the meeting delete button
+                    const deleteButton = row.querySelector(".delete-button")
+                    if (deleteButton instanceof HTMLButtonElement) {
+                        deleteButton.addEventListener("click", function () {
+                            if (confirm("Delete this meeting?")) {
+                                meetings.splice(i, 1)
+                                chrome.storage.local.set({ meetings: meetings }, function () {
+                                    console.log("Meeting title updated")
+                                })
+                            }
+                        })
+                    }
+                }
+                const meetingsTableContainer = document.querySelector("#meetings-table-container")
+                if (!isMeetingsTableExpanded && meetingsTableContainer && (meetingsTableContainer.clientHeight > 280)) {
+                    meetingsTableContainer?.classList.add("fade-mask")
+                    document.querySelector("#show-all")?.setAttribute("style", "display: block")
                 }
             }
             else {