aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/apis/youtube/YoutubeBox.tsx112
1 files changed, 100 insertions, 12 deletions
diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx
index d94f3785c..fa2d3fb53 100644
--- a/src/client/apis/youtube/YoutubeBox.tsx
+++ b/src/client/apis/youtube/YoutubeBox.tsx
@@ -4,14 +4,17 @@ import { FieldViewProps, FieldView } from "../../views/nodes/FieldView";
import { HtmlField } from "../../../new_fields/HtmlField";
import { WebField } from "../../../new_fields/URLField";
import { observer } from "mobx-react";
-import { computed, reaction, IReactionDisposer, observable, action } from 'mobx';
+import { computed, reaction, IReactionDisposer, observable, action, runInAction } from 'mobx';
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 { NumCast, Cast, StrCast } from "../../../new_fields/Types";
import "./YoutubeBox.scss";
import { Docs } from "../../documents/Documents";
+import { Doc } from "../../../new_fields/Doc";
+import { listSpec } from "../../../new_fields/Schema";
+import { List } from "../../../new_fields/List";
@observer
@@ -22,11 +25,43 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
@observable searchResults: any[] = [];
@observable videoClicked: boolean = false;
@observable selectedVideoUrl: string = "";
+ // @observable cachedResults: List<Doc> | undefined;
+ @observable lisOfBackUp: JSX.Element[] = [];
+
public static LayoutString() { return FieldView.LayoutString(YoutubeBox); }
- componentWillMount() {
+ async componentWillMount() {
//DocServer.getYoutubeChannels();
+ let castedBackUpDocs = Cast(this.props.Document.cachedSearch, listSpec(Doc));
+ if (!castedBackUpDocs) {
+ this.props.Document.cachedSearch = castedBackUpDocs = new List<Doc>();
+ }
+ if (castedBackUpDocs.length !== 0) {
+ //let awaitedRes = await castedBackUpDocs;
+
+ this.searchResultsFound = true;
+
+ for (let videoBackUp of castedBackUpDocs) {
+ let curBackUp = await videoBackUp;
+ let videoId = StrCast(curBackUp.videoId);
+ let videoTitle = StrCast(curBackUp.videoTitle);
+ let thumbnailUrl = StrCast(curBackUp.thumbnailUrl);
+ runInAction(() => this.lisOfBackUp.push((
+ <li
+ onClick={() => this.embedVideoOnClick(videoId, videoTitle)}
+ key={videoId}
+ >
+ <img src={thumbnailUrl} />
+ <span className="videoTitle">{videoTitle}</span>
+ </li>)
+ ));
+ }
+
+
+ }
+
+
}
_ignore = 0;
@@ -63,12 +98,24 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
console.log("Results: ", this.searchResults);
if (this.searchResults.length > 0) {
this.searchResultsFound = true;
+ this.backUpSearchResults(videos);
if (this.videoClicked) {
this.videoClicked = false;
}
}
}
+ backUpSearchResults = (videos: any[]) => {
+ let castedBackUpDocs = Cast(this.props.Document.cachedSearch, listSpec(Doc));
+ videos.forEach((video) => {
+ let videoBackUp = new Doc();
+ videoBackUp.videoId = video.id.videoId;
+ videoBackUp.videoTitle = this.filterYoutubeTitleResult(video.snippet.title);
+ videoBackUp.thumbnailUrl = video.snippet.thumbnails.medium.url;
+ castedBackUpDocs!.push(videoBackUp);
+ });
+ }
+
filterYoutubeTitleResult = (resultTitle: string) => {
let processedTitle: string = resultTitle.ReplaceAll("&amp;", "&");
processedTitle = processedTitle.ReplaceAll("&#39;", "'");
@@ -76,17 +123,56 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
return processedTitle;
}
+ // mapSearchResults = () => {
+ // if (this.searchResults.length !== 0) {
+ // console.log("Entered here");
+ // return <ul>{
+ // this.searchResults.map((video) => {
+ // let filteredTitle = this.filterYoutubeTitleResult(video.snippet.title);
+ // return <li onClick={() => this.embedVideoOnClick(video.id.videoId, filteredTitle)} key={video.id.videoId}><img src={video.snippet.thumbnails.medium.url} /> <span className="videoTitle">{filteredTitle}</span> </li>;
+ // })}
+ // </ul>;
+ // } else if (this.cachedResults!.length !== 0) {
+ // return <ul>{
+ // this.cachedResults!.map(async (videoBackUp) => {
+ // let curBackUp = await videoBackUp;
+ // let videoId = StrCast(curBackUp.videoId);
+ // let videoTitle = StrCast(curBackUp.videoTitle);
+ // let thumbnailUrl = StrCast(curBackUp.thumbnailUrl);
+ // return <li onClick={() => this.embedVideoOnClick(videoTitle, videoTitle)} key={videoId}><img src={thumbnailUrl} /> <span className="videoTitle">{videoTitle}</span> </li>;
+ // })}
+ // </ul>;
+ // }
+ // }
+
renderSearchResultsOrVideo = () => {
if (this.searchResultsFound) {
- return <ul>
- {this.searchResults.map((video) => {
- let filteredTitle = this.filterYoutubeTitleResult(video.snippet.title);
- return <li onClick={() => this.embedVideoOnClick(video.id.videoId, filteredTitle)} key={video.id.videoId}><img src={video.snippet.thumbnails.medium.url} /> <span className="videoTitle">{filteredTitle}</span> </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>;
- // }
+ if (this.searchResults.length !== 0) {
+ return <ul>
+ {this.searchResults.map((video) => {
+ let filteredTitle = this.filterYoutubeTitleResult(video.snippet.title);
+ return <li onClick={() => this.embedVideoOnClick(video.id.videoId, filteredTitle)} key={video.id.videoId}><img src={video.snippet.thumbnails.medium.url} /> <span className="videoTitle">{filteredTitle}</span> </li>;
+ })}
+ </ul>;
+ } else if (this.lisOfBackUp.length !== 0) {
+ // let lis: JSX.Element[] = [];
+ // for (let videoBackUp of this.cachedResults!) {
+ // let curBackUp = await videoBackUp;
+ // let videoId = StrCast(curBackUp.videoId);
+ // let videoTitle = StrCast(curBackUp.videoTitle);
+ // let thumbnailUrl = StrCast(curBackUp.thumbnailUrl);
+ // lis.push((
+ // <li
+ // onClick={() => this.embedVideoOnClick(videoTitle, videoTitle)}
+ // key={videoId}
+ // >
+ // <img src={thumbnailUrl} />
+ // <span className="videoTitle">{videoTitle}</span>
+ // </li>)
+ // );
+ // }
+ return <ul>{this.lisOfBackUp}</ul>;
+ }
} else {
return (null);
}
@@ -95,6 +181,7 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
@action
embedVideoOnClick = (videoId: string, filteredTitle: string) => {
let embeddedUrl = "https://www.youtube.com/embed/" + videoId;
+ console.log("EmbeddedUrl: ", embeddedUrl);
this.selectedVideoUrl = embeddedUrl;
let addFunction = this.props.addDocument!;
let newVideoX = NumCast(this.props.Document.x) + NumCast(this.props.Document.width);
@@ -109,6 +196,7 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
render() {
let field = this.props.Document[this.props.fieldKey];
+ //let results = this.renderSearchResultsOrVideo();
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={{ height: 40, width: "100%", border: "1px solid black", padding: 5, textAlign: "center" }} ref={(e) => this.YoutubeSearchElement = e!} />
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 19:12:33 +0000