Merge pull request #2004 from delexagon/transcript-download

Transcript download

Author: mertbagt

components/hearing/HearingDetails.tsx

@@ -8,6 +8,7 @@ import { Col, Container, Image, Row } from "../bootstrap"
 import { firestore } from "../firebase"
 import * as links from "../links"
 import { Back } from "../shared/CommonComponents"
+import { Paragraph, fetchTranscriptionData } from "./transcription"
 
 const ButtonContainer = styled.div`
   width: fit-content;
@@ -44,11 +45,7 @@ export const HearingDetails = ({
   hearingId: string | string[] | undefined
 }) => {
   const { t } = useTranslation(["common", "hearing"])
-  const [transcriptData, setTranscriptData] = useState(null)
-
-  const handleTranscriptData = (data: any) => {
-    setTranscriptData(data)
-  }
+  const [transcriptData, setTranscriptData] = useState<Paragraph[]>([])
 
   const [videoLoaded, setVideoLoaded] = useState(false)
   const handleVideoLoad = () => {
@@ -85,6 +82,14 @@ export const HearingDetails = ({
     setVideoURL(docData?.videoURL)
   }, [eventId])
 
+  useEffect(() => {
+    ;(async function () {
+      if (!videoTranscriptionId || transcriptData.length !== 0) return
+      const docList = await fetchTranscriptionData(videoTranscriptionId)
+      setTranscriptData(docList)
+    })()
+  }, [videoTranscriptionId])
+
   useEffect(() => {
     hearingData()
   }, [hearingData])
@@ -168,11 +173,10 @@ export const HearingDetails = ({
           )}
 
           <Transcriptions
-            handleTranscriptData={handleTranscriptData}
+            transcriptData={transcriptData}
             setCurTimeVideo={setCurTimeVideo}
             videoLoaded={videoLoaded}
             videoRef={videoRef}
-            videoTranscriptionId={videoTranscriptionId}
           />
         </Col>
 
@@ -182,6 +186,8 @@ export const HearingDetails = ({
             committeeCode={committeeCode}
             generalCourtNumber={generalCourtNumber}
             hearingDate={hearingDate}
+            hearingId={hearingId}
+            transcriptData={transcriptData}
           />
         </div>
       </Row>

components/hearing/HearingSidebar.tsx

@@ -4,11 +4,13 @@ import Link from "next/link"
 import { useCallback, useEffect, useState } from "react"
 import type { ModalProps } from "react-bootstrap"
 import styled from "styled-components"
+import Papa from "papaparse"
 import { Col, Image, Modal, Row } from "../bootstrap"
 import { firestore } from "../firebase"
 import * as links from "../links"
 import { billSiteURL, Internal } from "../links"
 import { LabeledIcon } from "../shared"
+import { Paragraph, formatMilliseconds } from "./transcription"
 
 type Bill = {
   BillNumber: string
@@ -116,12 +118,16 @@ export const HearingSidebar = ({
   billsInAgenda,
   committeeCode,
   generalCourtNumber,
-  hearingDate
+  hearingDate,
+  hearingId,
+  transcriptData
 }: {
   billsInAgenda: never[]
   committeeCode: string
   generalCourtNumber: string
   hearingDate: string
+  hearingId: undefined | string | string[]
+  transcriptData: Paragraph[]
 }) => {
   const { t } = useTranslation(["common", "hearing"])
 
@@ -136,6 +142,8 @@ export const HearingSidebar = ({
     dateCheck = true
   }
 
+  const [downloadName, setDownloadName] = useState<string>("hearing.csv")
+  const [downloadURL, setDownloadURL] = useState<string>("")
   const [houseChairName, setHouseChairName] = useState<string>("")
   const [houseChairperson, setHouseChairperson] = useState<Legislator>()
   const [members, setMembers] = useState<Members[]>()
@@ -176,6 +184,30 @@ export const HearingSidebar = ({
     setMembers(memberData)
   }, [committeeCode, generalCourtNumber])
 
+  useEffect(() => {
+    if (!hearingId) {
+      setDownloadName("hearing.csv")
+    } else {
+      setDownloadName(`hearing-${hearingId}.csv`)
+    }
+  }, [hearingId])
+
+  useEffect(() => {
+    if (transcriptData.length === 0) return
+    const csv_objects = transcriptData.map(doc => ({
+      start: formatMilliseconds(doc.start),
+      text: doc.text
+    }))
+    const csv = Papa.unparse(csv_objects)
+    const blob = new Blob([csv], { type: "text/csv" })
+    const url = URL.createObjectURL(blob)
+    setDownloadURL(url)
+
+    return () => {
+      URL.revokeObjectURL(url)
+    }
+  }, [transcriptData])
+
   useEffect(() => {
     committeeCode && generalCourtNumber ? committeeData() : null
   }, [committeeCode, committeeData, generalCourtNumber])
@@ -193,12 +225,31 @@ export const HearingSidebar = ({
         {t("hearing_details", { ns: "hearing" })}
       </SidebarHeader>
 
-      {dateCheck ? (
-        <SidebarBody className={`border-bottom fs-6 fw-bold px-3 py-3`}>
-          <SidebarSubbody className={`mb-1`}>
-            {t("recording_date", { ns: "hearing" })}
-          </SidebarSubbody>
-          <div className={`fw-normal`}>{formattedDate}</div>
+      {dateCheck || (downloadURL !== "" && hearingId !== undefined) ? (
+        <SidebarBody className={`border-bottom fs-6 px-3 py-3`}>
+          {dateCheck ? (
+            <>
+              <SidebarSubbody className={`mb-1 fw-bold`}>
+                {t("recording_date", { ns: "hearing" })}
+              </SidebarSubbody>
+              {formattedDate}
+            </>
+          ) : (
+            <></>
+          )}
+          {downloadURL !== "" && hearingId !== undefined ? (
+            <div>
+              <a
+                href={downloadURL}
+                download={downloadName}
+                className="text-blue-600 underline"
+              >
+                {t("download_transcript", { ns: "hearing" })}
+              </a>
+            </div>
+          ) : (
+            <></>
+          )}
         </SidebarBody>
       ) : (
         <></>

components/hearing/Transcriptions.tsx

@@ -1,18 +1,10 @@
 import { faMagnifyingGlass, faTimes } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { collection, getDocs, orderBy, query } from "firebase/firestore"
 import { useTranslation } from "next-i18next"
 import React, { useCallback, useEffect, useState } from "react"
 import styled from "styled-components"
 import { Col, Container, Row } from "../bootstrap"
-import { firestore } from "../firebase"
-
-type Paragraph = {
-  confidence: number
-  end: number
-  start: number
-  text: string
-}
+import { Paragraph, formatMilliseconds } from "./transcription"
 
 const ClearButton = styled(FontAwesomeIcon)`
   position: absolute;
@@ -54,7 +46,7 @@ const TranscriptBottom = styled(Container)`
 `
 
 const TranscriptContainer = styled(Container)`
-  max-height: 460px;
+  max-height: 483px;
   overflow-y: auto;
   background-color: #ffffff;
 `
@@ -115,57 +107,32 @@ const SearchWrapper = styled.div`
 `
 
 export const Transcriptions = ({
-  handleTranscriptData,
+  transcriptData,
   setCurTimeVideo,
   videoLoaded,
-  videoRef,
-  videoTranscriptionId
+  videoRef
 }: {
-  handleTranscriptData: (data: any) => void
+  transcriptData: Paragraph[]
   setCurTimeVideo: any
   videoLoaded: boolean
   videoRef: any
-  videoTranscriptionId: string
 }) => {
   const { t } = useTranslation(["common", "hearing"])
   const [highlightedId, setHighlightedId] = useState(-1)
-  const [transcriptData, setTranscriptData] = useState<Paragraph[]>([])
   const [searchTerm, setSearchTerm] = useState("")
-  const vid = videoTranscriptionId || "prevent FirebaseError"
-
-  const subscriptionRef = collection(
-    firestore,
-    `transcriptions/${vid}/paragraphs`
-  )
-
-  const fetchTranscriptionData = useCallback(async () => {
-    let docList: any[] = []
-
-    const q = query(subscriptionRef, orderBy("start"))
-    const querySnapshot = await getDocs(q)
-
-    querySnapshot.forEach(doc => {
-      // doc.data() is never undefined for query doc snapshots
-      docList.push(doc.data())
-    })
-
-    if (transcriptData.length === 0 && docList.length != 0) {
-      setTranscriptData(docList)
-      handleTranscriptData(docList)
-    }
-  }, [subscriptionRef, transcriptData])
+  const [filteredData, setFilteredData] = useState<Paragraph[]>([])
 
   const handleClearInput = () => {
     setSearchTerm("")
   }
 
   useEffect(() => {
-    fetchTranscriptionData()
-  }, [fetchTranscriptionData])
-
-  const filteredData = transcriptData.filter(el =>
-    el.text.toLowerCase().includes(searchTerm.toLowerCase())
-  )
+    setFilteredData(
+      transcriptData.filter(el =>
+        el.text.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    )
+  }, [transcriptData, searchTerm])
 
   useEffect(() => {
     const handleTimeUpdate = () => {
@@ -261,23 +228,6 @@ function TranscriptItem({
     setCurTimeVideo(valSeconds)
   }
 
-  const formatMilliseconds = (ms: number) => {
-    const totalSeconds = Math.floor(ms / 1000)
-    const hours = Math.floor(totalSeconds / 3600)
-    const minutes = Math.floor((totalSeconds % 3600) / 60)
-    const seconds = totalSeconds % 60
-
-    const formattedHours = String(hours).padStart(2, "0")
-    const formattedMinutes = String(minutes).padStart(2, "0")
-    const formattedSeconds = String(seconds).padStart(2, "0")
-
-    if (hours >= 1) {
-      return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`
-    } else {
-      return `${formattedMinutes}:${formattedSeconds}`
-    }
-  }
-
   const isHighlighted = (index: number): boolean => {
     return index === highlightedId
   }

components/hearing/transcription.ts

@@ -0,0 +1,47 @@
+import { firestore } from "../firebase"
+import { collection, getDocs, orderBy, query } from "firebase/firestore"
+
+export type Paragraph = {
+  confidence: number
+  end: number
+  start: number
+  text: string
+}
+
+export async function fetchTranscriptionData(
+  videoTranscriptionId: string
+): Promise<Paragraph[]> {
+  const subscriptionRef = collection(
+    firestore,
+    `transcriptions/${videoTranscriptionId}/paragraphs`
+  )
+
+  let docList: any[] = []
+
+  const q = query(subscriptionRef, orderBy("start"))
+  const querySnapshot = await getDocs(q)
+
+  querySnapshot.forEach(doc => {
+    // doc.data() is never undefined for query doc snapshots
+    docList.push(doc.data())
+  })
+
+  return docList
+}
+
+export function formatMilliseconds(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+
+  const formattedHours = String(hours).padStart(2, "0")
+  const formattedMinutes = String(minutes).padStart(2, "0")
+  const formattedSeconds = String(seconds).padStart(2, "0")
+
+  if (hours >= 1) {
+    return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`
+  } else {
+    return `${formattedMinutes}:${formattedSeconds}`
+  }
+}

public/locales/en/hearing.json

@@ -3,6 +3,7 @@
   "bills_consideration": "Bills under consideration",
   "chairs": "Chairs",
   "committee_members": "Committee members",
+  "download_transcript": "Download transcript",
   "hearing_details": "Hearing details",
   "house_chair": "House Chair",
   "member": "Member",