2 files changed, 25 insertions, 6 deletions

diff --git a/src/client/apis/youtube/YoutubeBox.scss b/src/client/apis/youtube/YoutubeBox.scss
new file mode 100644
index 000000000..962f814a2
--- /dev/null
+++ b/src/client/apis/youtube/YoutubeBox.scss
@@ -0,0 +1,3 @@
+li {
+    margin: 4px;
+}
\ No newline at end of file
diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx
index d4d37950e..3e7e9e06d 100644
--- a/src/client/apis/youtube/YoutubeBox.tsx
+++ b/src/client/apis/youtube/YoutubeBox.tsx
@@ -9,6 +9,8 @@ import { DocumentDecorations } from "../../views/DocumentDecorations";
 import { InkingControl } from "../../views/InkingControl";
 import { Utils } from "../../../Utils";
 import { DocServer } from "../../DocServer";
+import { NumCast } from "../../../new_fields/Types";
+import "./YoutubeBox.scss";
 
 
 @observer
@@ -17,6 +19,8 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
     @observable YoutubeSearchElement: HTMLInputElement | undefined;
     @observable searchResultsFound: boolean = false;
     @observable searchResults: any[] = [];
+    @observable videoClicked: boolean = false;
+    @observable selectedVideoUrl: string = "";
 
     public static LayoutString() { return FieldView.LayoutString(YoutubeBox); }
 
@@ -45,7 +49,6 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
     onEnterKeyDown = (e: React.KeyboardEvent) => {
         if (e.keyCode === 13) {
             let submittedTitle = this.YoutubeSearchElement!.value;
-            console.log(submittedTitle);
             this.YoutubeSearchElement!.value = "";
             this.YoutubeSearchElement!.blur();
             DocServer.getYoutubeVideos(submittedTitle, this.processesVideoResults);
@@ -56,30 +59,43 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
     @action
     processesVideoResults = (videos: any[]) => {
         this.searchResults = videos;
-        console.log("Callback got called");
         if (this.searchResults.length > 0) {
             this.searchResultsFound = true;
+            this.searchResults.forEach((video) => console.log("Image Url", video.snippet));
+            if (this.videoClicked) {
+                this.videoClicked = false;
+            }
         }
     }
 
-    renderSearchResults = () => {
+    renderSearchResultsOrVideo = () => {
         if (this.searchResultsFound) {
             return <ul>
                 {this.searchResults.map((video) => {
-                    return <li key={video.id.videoId}>{video.snippet.title}</li>;
+                    return <li onClick={() => this.embedVideoOnClick(video.id.videoId)} key={video.id.videoId}><img src={video.snippet.thumbnails.medium.url} />  {video.snippet.title}</li>;
                 })}
             </ul>;
+        } else if (this.videoClicked) {
+            return <iframe src={this.selectedVideoUrl} height={NumCast(this.props.Document.height) - 40} width={NumCast(this.props.Document.width)}></iframe>;
         } else {
             return (null);
         }
     }
 
+    @action
+    embedVideoOnClick = (videoId: string) => {
+        let embeddedUrl = "https://www.youtube.com/embed/" + videoId;
+        this.selectedVideoUrl = embeddedUrl;
+        this.searchResultsFound = false;
+        this.videoClicked = true;
+    }
+
     render() {
         let field = this.props.Document[this.props.fieldKey];
         let content =
             <div style={{ width: "100%", height: "100%", position: "absolute" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
-                <input type="text" placeholder="Search for a video" onKeyDown={this.onEnterKeyDown} style={{ width: "100%", border: "1px solid black", padding: 5, textAlign: "center" }} ref={(e) => this.YoutubeSearchElement = e!} />
-                {this.renderSearchResults()}
+                <input type="text" placeholder="Search for a video" onKeyDown={this.onEnterKeyDown} style={{ height: 40, width: "100%", border: "1px solid black", padding: 5, textAlign: "center" }} ref={(e) => this.YoutubeSearchElement = e!} />
+                {this.renderSearchResultsOrVideo()}
             </div>;
 
         let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;