Fix: OCR Text (#73)

Author: priyajeet

src/components/Keywords/Keyword.scss

@@ -24,6 +24,8 @@
             border-radius: 8px;
             // border-radius: 8px 0 0 8px;
             // border-right: 0 none;
+            max-width: 285px;
+            white-space: normal;
         }
 
         &.buik-file-keyword-delete {

src/components/Transcript/Transcript.js

@@ -27,58 +27,68 @@ const isValidStartTime = (cellData?: TimeSlice[]): boolean =>
     Array.isArray(cellData) && !!cellData[0] && typeof cellData[0].start === 'number';
 
 const Transcript = ({ skill: { entries }, getPreviewer }: Props) =>
-    <AutoSizer disableHeight>
-        {({ width }) =>
-            <Table
-                width={width}
-                height={300}
-                disableHeader
-                headerHeight={0}
-                rowHeight={cache.rowHeight}
-                rowCount={entries.length}
-                rowGetter={({ index }) => entries[index]}
-                className='buik-transcript'
-                deferredMeasurementCache={cache}
-                onRowClick={({ rowData }: { rowData: SkillDataEntry }): void => {
-                    const viewer = getPreviewer ? getPreviewer() : null;
-                    const cellData = rowData.appears;
-                    if (
-                        isValidStartTime(cellData) &&
-                        viewer &&
-                        viewer.isLoaded() &&
-                        !viewer.isDestroyed() &&
-                        typeof viewer.play === 'function'
-                    ) {
-                        // $FlowFixMe Already checked above
-                        const { start, end } = cellData[0];
-                        viewer.play(start, end);
-                    }
-                }}
-            >
-                <Column
-                    dataKey='appears'
-                    width={50}
-                    flexShrink={0}
-                    cellRenderer={({ cellData }): string =>
-                        isValidStartTime(cellData) ? formatTime(cellData[0].start) : '--'}
-                />
-                <Column
-                    dataKey='text'
-                    width={240}
-                    flexGrow={1}
-                    cellRenderer={({ dataKey, parent, rowIndex, cellData }) =>
-                        <CellMeasurer cache={cache} columnIndex={0} key={dataKey} parent={parent} rowIndex={rowIndex}>
-                            <div
-                                className='buik-transcript-column'
-                                style={{
-                                    whiteSpace: 'normal'
-                                }}
-                            >
-                                {(cellData || '').replace(/\r?\n|\r/g, '')}
-                            </div>
-                        </CellMeasurer>}
-                />
-            </Table>}
-    </AutoSizer>;
+    entries.length === 1 && !isValidStartTime(entries[0].appears)
+        ? <span className='buik-transcript'>
+            {entries[0].text}
+        </span>
+        : <AutoSizer disableHeight>
+            {({ width }) =>
+                <Table
+                    width={width}
+                    height={300}
+                    disableHeader
+                    headerHeight={0}
+                    rowHeight={cache.rowHeight}
+                    rowCount={entries.length}
+                    rowGetter={({ index }) => entries[index]}
+                    className='buik-transcript'
+                    deferredMeasurementCache={cache}
+                    onRowClick={({ rowData }: { rowData: SkillDataEntry }): void => {
+                        const viewer = getPreviewer ? getPreviewer() : null;
+                        const cellData = rowData.appears;
+                        if (
+                              isValidStartTime(cellData) &&
+                              viewer &&
+                              viewer.isLoaded() &&
+                              !viewer.isDestroyed() &&
+                              typeof viewer.play === 'function'
+                          ) {
+                              // $FlowFixMe Already checked above
+                            const { start, end } = cellData[0];
+                            viewer.play(start, end);
+                        }
+                    }}
+                  >
+                    <Column
+                        dataKey='appears'
+                        width={50}
+                        flexShrink={0}
+                        cellRenderer={({ cellData }): string =>
+                              isValidStartTime(cellData) ? formatTime(cellData[0].start) : '--'}
+                      />
+                    <Column
+                        dataKey='text'
+                        width={240}
+                        flexGrow={1}
+                        cellRenderer={({ dataKey, parent, rowIndex, cellData }) =>
+                            <CellMeasurer
+                                cache={cache}
+                                columnIndex={0}
+                                key={dataKey}
+                                parent={parent}
+                                rowIndex={rowIndex}
+                              >
+                                <div
+                                    className='buik-transcript-column'
+                                    style={{
+                                        whiteSpace: 'normal'
+                                    }}
+                                  >
+                                    {(cellData || '').replace(/\r?\n|\r/g, '')}
+                                </div>
+                            </CellMeasurer>}
+                      />
+                </Table>}
+        </AutoSizer>;
 
 export default Transcript;

test/preview.html

@@ -22,7 +22,7 @@
             window.onload = function() {
                 const { ContentExplorer } = Box;
                 const explorer = new ContentExplorer();
-                explorer.show('0', '6meCdbq8wMEHEECDRBbqwWFQij2SSfyf', {
+                explorer.show('0', 'QZ9agDZAikmswsvSro3zsP50qEZYNicS', {
                     hasPreviewSidebar: true
                 });
             }