diff options
Diffstat (limited to 'src/client/views/newlightbox/components/Recommendation/Recommendation.tsx')
| -rw-r--r-- | src/client/views/newlightbox/components/Recommendation/Recommendation.tsx | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx new file mode 100644 index 000000000..c0d357ad5 --- /dev/null +++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx @@ -0,0 +1,90 @@ +import * as React from 'react'; +import { IRecommendation } from "./utils"; +import './Recommendation.scss'; +import { getType } from '../../utils'; +import { FaEyeSlash } from 'react-icons/fa'; +import { NewLightboxView } from '../../NewLightboxView'; +import { DocumentManager } from '../../../../util/DocumentManager'; +import { Doc } from '../../../../../fields/Doc'; +import { Docs } from '../../../../documents/Documents'; + +export const Recommendation = (props: IRecommendation) => { + const {title, data, type, text, transcript, loading, source, previewUrl, related_concepts, distance, docId} = props + + return <div className={`recommendation-container ${loading && 'loading'} ${previewUrl && 'previewUrl'}`} onClick={() => { + let doc: Doc | null = null; + if (source == "Dash" && docId) { + const docView = DocumentManager.Instance.getDocumentViewById(docId) + if (docView) { + doc = docView.rootDoc; + } + } else if (data) { + console.log(data, type) + switch(type) { + case "YouTube": + console.log('create ', type, 'document') + doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript }) + break; + case "Video": + console.log('create ', type, 'document') + doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript: transcript }) + break; + case "Webpage": + console.log('create ', type, 'document') + doc = Docs.Create.WebDocument(data, { title: title, text: text }) + break; + case "HTML": + console.log('create ', type, 'document') + doc = Docs.Create.WebDocument(data, { title: title, text: text }) + break; + case "Text": + console.log('create ', type, 'document') + doc = Docs.Create.TextDocument(data, { title: title, text: text }) + break; + case "PDF": + console.log('create ', type, 'document') + doc = Docs.Create.PdfDocument(data, { title: title, text: text }) + break; + } + } + if (doc !== null) NewLightboxView.SetNewLightboxDoc(doc) + }}> + {loading ? + <div className={`image-container`}> + </div> + : + previewUrl ? <div className={`image-container`}> + {<img className={`image`} src={previewUrl}></img>} + </div> + : null + } + <div className={`title`}>{title}</div> + <div className={`info`}> + {!loading && <div className={`type-container`}> + <div className={`lb-label`}>Type</div><div className={`lb-type`}>{getType(type!)}</div> + </div>} + {!loading && <div className={`distance-container`}> + <div className={`lb-label`}>Distance</div><div className={`lb-distance`}>{distance}</div> + </div>} + </div> + <div className={`source`}> + {!loading && <div className={`source-container`}> + <div className={`lb-label`}>Source</div><div className={`lb-source`}>{source}</div> + </div>} + </div> + <div className={`explainer`}> + {!loading && + <div> + You are seeing this recommendation because this document also explores + <div className={`concepts-container`}> + {related_concepts?.map((val) => { + return <div className={'concept'}>{val}</div> + })} + </div> + </div>} + </div> + <div className={`hide-rec`}> + {!loading && <><div>Hide Recommendation</div><div style={{fontSize: 15, paddingRight: 5}}><FaEyeSlash/></div></>} + </div> + </div> +}
\ No newline at end of file |