aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/DocServer.ts6
-rw-r--r--src/client/apis/youtube/YoutubeBox.tsx26
-rw-r--r--src/server/Message.ts7
-rw-r--r--src/server/index.ts8
-rw-r--r--src/server/youtubeApi/youtubeApiSample.js12
5 files changed, 34 insertions, 25 deletions
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index b0060bfdc..65d662ebc 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -48,12 +48,12 @@ export namespace DocServer {
}
export async function getYoutubeChannels() {
- let apiKey = await Utils.EmitCallback(_socket, MessageStore.YoutubeApiQuery, YoutubeQueryTypes.Channels);
+ let apiKey = await Utils.EmitCallback(_socket, MessageStore.YoutubeApiQuery, { type: YoutubeQueryTypes.Channels });
return apiKey;
}
- export function getYoutubeVideos() {
- Utils.EmitCallback(_socket, MessageStore.YoutubeApiQuery, YoutubeQueryTypes.SearchVideo);
+ export function getYoutubeVideos(videoTitle: string) {
+ Utils.EmitCallback(_socket, MessageStore.YoutubeApiQuery, { type: YoutubeQueryTypes.SearchVideo, userInput: videoTitle });
}
diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx
index dce891a07..b044e2a05 100644
--- a/src/client/apis/youtube/YoutubeBox.tsx
+++ b/src/client/apis/youtube/YoutubeBox.tsx
@@ -4,7 +4,7 @@ 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 } from 'mobx';
+import { computed, reaction, IReactionDisposer, observable } from 'mobx';
import { DocumentDecorations } from "../../views/DocumentDecorations";
import { InkingControl } from "../../views/InkingControl";
import { Utils } from "../../../Utils";
@@ -14,12 +14,12 @@ import { DocServer } from "../../DocServer";
@observer
export class YoutubeBox extends React.Component<FieldViewProps> {
+ @observable YoutubeSearchElement: HTMLInputElement | undefined;
public static LayoutString() { return FieldView.LayoutString(YoutubeBox); }
componentWillMount() {
DocServer.getYoutubeChannels();
- DocServer.getYoutubeVideos();
}
_ignore = 0;
@@ -39,19 +39,23 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
e.stopPropagation();
}
}
+
+ 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);
+
+ }
+ }
+
render() {
let field = this.props.Document[this.props.fieldKey];
- let view;
- if (field instanceof HtmlField) {
- view = <span id="webBox-htmlSpan" dangerouslySetInnerHTML={{ __html: field.html }} />;
- } else if (field instanceof WebField) {
- view = <iframe src={field.url.href} style={{ position: "absolute", width: "100%", height: "100%" }} />;
- } else {
- view = <iframe src={"https://crossorigin.me/https://cs.brown.edu"} style={{ position: "absolute", width: "100%", height: "100%" }} />;
- }
let content =
<div style={{ width: "100%", height: "100%", position: "absolute" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
- {view}
+ <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!} />
</div>;
let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 87bb9d0fc..7b208dee9 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -28,6 +28,11 @@ export enum YoutubeQueryTypes {
Channels, SearchVideo
}
+export interface YoutubeQueryInput {
+ readonly type: YoutubeQueryTypes;
+ readonly userInput?: string;
+}
+
export interface Reference {
readonly id: string;
}
@@ -49,5 +54,5 @@ export namespace MessageStore {
export const GetRefFields = new Message<string[]>("Get Ref Fields");
export const UpdateField = new Message<Diff>("Update Ref Field");
export const CreateField = new Message<Reference>("Create Ref Field");
- export const YoutubeApiQuery = new Message<YoutubeQueryTypes>("Youtube Api Query");
+ export const YoutubeApiQuery = new Message<YoutubeQueryInput>("Youtube Api Query");
}
diff --git a/src/server/index.ts b/src/server/index.ts
index 3d4f59ee4..9faeee381 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -24,7 +24,7 @@ import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLo
import { DashUserModel } from './authentication/models/user_model';
import { Client } from './Client';
import { Database } from './database';
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryTypes as YoutubeQueryType } from "./Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryTypes as YoutubeQueryType, YoutubeQueryInput } from "./Message";
import { RouteStore } from './RouteStore';
const app = express();
const config = require('../../webpack.config');
@@ -367,13 +367,13 @@ function GetRefFields([ids, callback]: [string[], (result?: Transferable[]) => v
Database.Instance.getDocuments(ids, callback, "newDocuments");
}
-function HandleYoutubeQuery([type, callback]: [YoutubeQueryType, (result?: string) => void]) {
- switch (type) {
+function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: string) => void]) {
+ switch (query.type) {
case YoutubeQueryType.Channels:
YoutubeApi.authorizedGetChannel(youtubeApiKey);
break;
case YoutubeQueryType.SearchVideo:
- YoutubeApi.authorizedGetVideos(youtubeApiKey);
+ YoutubeApi.authorizedGetVideos(youtubeApiKey, query.userInput);
}
}
diff --git a/src/server/youtubeApi/youtubeApiSample.js b/src/server/youtubeApi/youtubeApiSample.js
index 35d74c62f..cd2e89cae 100644
--- a/src/server/youtubeApi/youtubeApiSample.js
+++ b/src/server/youtubeApi/youtubeApiSample.js
@@ -29,8 +29,8 @@ module.exports.authorizedGetChannel = (apiKey) => {
authorize(JSON.parse(apiKey), getChannel);
}
-module.exports.authorizedGetVideos = (apiKey) => {
- authorize(JSON.parse(apiKey), getSampleVideos);
+module.exports.authorizedGetVideos = (apiKey, userInput) => {
+ authorize(JSON.parse(apiKey), getSampleVideos, { userInput: userInput });
}
@@ -41,7 +41,7 @@ module.exports.authorizedGetVideos = (apiKey) => {
* @param {Object} credentials The authorization client credentials.
* @param {function} callback The callback to call with the authorized client.
*/
-function authorize(credentials, callback) {
+function authorize(credentials, callback, args = {}) {
let clientSecret = credentials.installed.client_secret;
let clientId = credentials.installed.client_id;
let redirectUrl = credentials.installed.redirect_uris[0];
@@ -53,7 +53,7 @@ function authorize(credentials, callback) {
getNewToken(oauth2Client, callback);
} else {
oauth2Client.credentials = JSON.parse(token);
- callback(oauth2Client);
+ callback(oauth2Client, args);
}
});
}
@@ -139,13 +139,13 @@ function getChannel(auth) {
});
}
-function getSampleVideos(auth) {
+function getSampleVideos(auth, args) {
let service = google.youtube('v3');
service.search.list({
auth: auth,
part: 'id, snippet',
type: 'video',
- q: 'istanbul',
+ q: args.userInput,
maxResults: 3
}, function (err, response) {
if (err) {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 23:06:22 +0000