From 1e7c0c4d339d7900e1970583699411e1f45bbdb0 Mon Sep 17 00:00:00 2001
From: Elliot Nash <elliot@venturemedias.com>
Date: Tue, 18 Apr 2023 12:21:58 -0400
Subject: [PATCH] feat: print transcript

---
 src/lib/config/index.tsx                |  1 +
 src/modules/Transcript/Header/index.tsx | 27 +++++++++++++++++++++++++
 src/modules/Transcript/index.tsx        |  6 +++++-
 src/modules/Transcript/styles.css       | 24 ++++++++++++++++++++++
 src/web/demo/EventByTicker.html         |  3 ++-
 5 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/lib/config/index.tsx b/src/lib/config/index.tsx
index 130e0eb6a..bf18b39ab 100644
--- a/src/lib/config/index.tsx
+++ b/src/lib/config/index.tsx
@@ -36,6 +36,7 @@ export interface Options {
     relativeTimestamps?: boolean;
     showAudioPlayer?: boolean;
     showCompanyFilter?: boolean;
+    showExport?: boolean;
     showPriceReaction?: boolean;
     showRecordingDetails?: boolean;
     showScheduleRecording?: boolean;
diff --git a/src/modules/Transcript/Header/index.tsx b/src/modules/Transcript/Header/index.tsx
index 9e317ede4..a0d7085ba 100644
--- a/src/modules/Transcript/Header/index.tsx
+++ b/src/modules/Transcript/Header/index.tsx
@@ -92,6 +92,7 @@ export function HeaderUI(props: HeaderUIProps): ReactElement {
 
     const config = useConfig();
     let showPriceReaction = true;
+    let showExport = true;
     let showTitleInfo = true;
     let showRecordingDetails = true;
     let showSearch = !hideSearch;
@@ -108,6 +109,9 @@ export function HeaderUI(props: HeaderUIProps): ReactElement {
         if (config.options.showSearch !== undefined) {
             showSearch = config.options.showSearch;
         }
+        if (config.options.showExport !== undefined) {
+            showExport = config.options.showExport;
+        }
     }
 
     return (
@@ -360,6 +364,29 @@ export function HeaderUI(props: HeaderUIProps): ReactElement {
                                         startTime={startTime}
                                     />
                                 )}
+                                {showExport && headerExpanded && event && (
+                                    <div
+                                        className={classNames(
+                                            'flex flex-col justify-start border-t-[1px] border-gray-100 px-3 dark:border-bluegray-5',
+                                            'transcript__header__details'
+                                        )}
+                                    >
+                                        <div className="flex items-center justify-between h-10 cursor-pointer">
+                                            <span className="text-sm block font-semibold w-28 mr-1 dark:text-white">
+                                                Export Transcript
+                                            </span>
+                                            <div
+                                                onClick={() => window.print()}
+                                                className={classNames(
+                                                    'text-gray-400 text-sm hover:text-gray-600',
+                                                    'bg-gray-100 hover:bg-gray-200 rounded-md px-2 py-1'
+                                                )}
+                                            >
+                                                Print
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
                             </>
                         );
                     })
diff --git a/src/modules/Transcript/index.tsx b/src/modules/Transcript/index.tsx
index 2379fc0bb..8022d2292 100644
--- a/src/modules/Transcript/index.tsx
+++ b/src/modules/Transcript/index.tsx
@@ -254,7 +254,11 @@ export const TranscriptUI = (props: TranscriptUIProps): ReactElement => {
                     </div>
                 ))
                 .otherwise(() => null)}
-            <div className="overflow-y-scroll flex-1 bg-gray-50 dark:bg-bluegray-7" ref={scrollContainerRef}>
+            <div
+                id="transcriptContainer"
+                className="overflow-y-scroll flex-1 bg-gray-50 dark:bg-bluegray-7"
+                ref={scrollContainerRef}
+            >
                 {match(eventQuery)
                     .with({ status: 'loading' }, () =>
                         new Array(5).fill(0).map((_, idx) => (
diff --git a/src/modules/Transcript/styles.css b/src/modules/Transcript/styles.css
index e69de29bb..9f147aa25 100644
--- a/src/modules/Transcript/styles.css
+++ b/src/modules/Transcript/styles.css
@@ -0,0 +1,24 @@
+@media print {
+    body * {
+        visibility: hidden;
+    }
+    .transcript__header__title *:not(button) {
+        @apply text-lg;
+        visibility: visible;
+    }
+    .transcript__header__title {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+    }
+    #transcriptContainer * {
+        visibility: visible;
+    }
+    #transcriptContainer {
+        position: absolute;
+        top: 80px;
+        left: 0px;
+        right: 0px;
+    }
+}
diff --git a/src/web/demo/EventByTicker.html b/src/web/demo/EventByTicker.html
index 034be483d..934955a7f 100644
--- a/src/web/demo/EventByTicker.html
+++ b/src/web/demo/EventByTicker.html
@@ -27,11 +27,12 @@
                     options: {
                         ticker: 'aapl',
                         darkMode: false,
-                        showTitleInfo: false,
+                        showTitleInfo: true,
                         showRecordingDetails: true,
                         showPriceReaction: true,
                         showSearch: true,
                         showAudioPlayer: false,
+                        showExport: true,
                     },
                     user: {
                         //email: 'customer@example.com',