From b285803c4e8c37302f6e02624a6127667d628305 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Tue, 25 Jun 2019 19:49:54 -0400 Subject: Youtube Api Exploration --- src/client/DocServer.ts | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/client/DocServer.ts') diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index cbcf751ee..c9cbce78e 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -47,6 +47,12 @@ export namespace DocServer { } } + export async function getYoutubeApiKey() { + let apiKey = await Utils.EmitCallback(_socket, MessageStore.YoutubeApiKey, undefined); + return apiKey; + } + + export async function GetRefFields(ids: string[]): Promise<{ [id: string]: Opt }> { const requestedIds: string[] = []; const waitingIds: string[] = []; -- cgit v1.2.3-70-g09d2 From b86050edd2da3acca258f117e8350aa8d53272d9 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 26 Jun 2019 15:14:46 -0400 Subject: Sample working onserver side --- client_secret.json | 1 + client_secret.json.json | 1 - src/client/DocServer.ts | 6 +- src/client/apis/youtube/YoutubeBox.tsx | 9 +- src/client/apis/youtube/youtubeApiSample.d.ts | 3 - src/client/apis/youtube/youtubeApiSample.js | 122 ----------------------- src/server/Message.ts | 6 +- src/server/Search.ts | 2 +- src/server/index.ts | 29 +++--- src/server/youtubeApi/youtubeApiSample.d.ts | 2 + src/server/youtubeApi/youtubeApiSample.js | 135 ++++++++++++++++++++++++++ 11 files changed, 162 insertions(+), 154 deletions(-) create mode 100644 client_secret.json delete mode 100644 client_secret.json.json delete mode 100644 src/client/apis/youtube/youtubeApiSample.d.ts delete mode 100644 src/client/apis/youtube/youtubeApiSample.js create mode 100644 src/server/youtubeApi/youtubeApiSample.d.ts create mode 100644 src/server/youtubeApi/youtubeApiSample.js (limited to 'src/client/DocServer.ts') diff --git a/client_secret.json b/client_secret.json new file mode 100644 index 000000000..a9c698421 --- /dev/null +++ b/client_secret.json @@ -0,0 +1 @@ +{"installed":{"client_id":"1005546247619-kqpnvh42mpa803tem8556b87umi4j9r0.apps.googleusercontent.com","project_id":"brown-dash","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://oauth2.googleapis.com/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_secret":"WshLb5TH9SdFVGGbQcnYj7IU","redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]}} \ No newline at end of file diff --git a/client_secret.json.json b/client_secret.json.json deleted file mode 100644 index 99dfbdf7b..000000000 --- a/client_secret.json.json +++ /dev/null @@ -1 +0,0 @@ -{"installed":{"client_id":"605555062960-ebbjrsv6ugkigpdoh6cdb3g6gmhdalnn.apps.googleusercontent.com","project_id":"dulcet-name-244817","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://oauth2.googleapis.com/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_secret":"3e8A9w5OJacQCGYIrHTu9ef2","redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]}} \ No newline at end of file diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index c9cbce78e..9dae54d74 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -1,5 +1,5 @@ import * as OpenSocket from 'socket.io-client'; -import { MessageStore } from "./../server/Message"; +import { MessageStore, YoutubeQueryTypes } from "./../server/Message"; import { Opt } from '../new_fields/Doc'; import { Utils, emptyFunction } from '../Utils'; import { SerializationHelper } from './util/SerializationHelper'; @@ -47,8 +47,8 @@ export namespace DocServer { } } - export async function getYoutubeApiKey() { - let apiKey = await Utils.EmitCallback(_socket, MessageStore.YoutubeApiKey, undefined); + export async function getYoutubeChannels() { + let apiKey = await Utils.EmitCallback(_socket, MessageStore.YoutubeApiQuery, YoutubeQueryTypes.Channels); return apiKey; } diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx index ee190750f..b029c51ec 100644 --- a/src/client/apis/youtube/YoutubeBox.tsx +++ b/src/client/apis/youtube/YoutubeBox.tsx @@ -7,7 +7,6 @@ import { observer } from "mobx-react"; import { computed, reaction, IReactionDisposer } from 'mobx'; import { DocumentDecorations } from "../../views/DocumentDecorations"; import { InkingControl } from "../../views/InkingControl"; -import * as YoutubeApi from "./youtubeApiSample"; import { Utils } from "../../../Utils"; import { DocServer } from "../../DocServer"; @@ -15,14 +14,11 @@ import { DocServer } from "../../DocServer"; @observer export class YoutubeBox extends React.Component { - private youtubeApiKey: string = ""; public static LayoutString() { return FieldView.LayoutString(YoutubeBox); } - async componentWillMount() { - let apiKey = await DocServer.getYoutubeApiKey(); - this.youtubeApiKey = apiKey; - YoutubeApi.authorizedGetChannel(this.youtubeApiKey); + componentWillMount() { + DocServer.getYoutubeChannels(); } _ignore = 0; @@ -45,7 +41,6 @@ export class YoutubeBox extends React.Component { render() { let field = this.props.Document[this.props.fieldKey]; let view; - YoutubeApi.readFsFile(); if (field instanceof HtmlField) { view = ; } else if (field instanceof WebField) { diff --git a/src/client/apis/youtube/youtubeApiSample.d.ts b/src/client/apis/youtube/youtubeApiSample.d.ts deleted file mode 100644 index 87a669e36..000000000 --- a/src/client/apis/youtube/youtubeApiSample.d.ts +++ /dev/null @@ -1,3 +0,0 @@ - -declare const YoutubeApi: any; -export = YoutubeApi; \ No newline at end of file diff --git a/src/client/apis/youtube/youtubeApiSample.js b/src/client/apis/youtube/youtubeApiSample.js deleted file mode 100644 index 7f14f2d3e..000000000 --- a/src/client/apis/youtube/youtubeApiSample.js +++ /dev/null @@ -1,122 +0,0 @@ -import { Utils } from "tslint"; - - -// If modifying these scopes, delete your previously saved credentials -// at ~/.credentials/youtube-nodejs-quickstart.json -let SCOPES = ['https://www.googleapis.com/auth/youtube.readonly']; -let TOKEN_DIR = (process.env.HOME || process.env.HOMEPATH || - process.env.USERPROFILE) + '/.credentials/'; -let TOKEN_PATH = TOKEN_DIR + 'youtube-nodejs-quickstart.json'; - - - -function authorizedGetChannel(apiKey) { - // Authorize a client with the loaded credentials, then call the YouTube API. - authorize(JSON.parse(apiKey), getChannel); -} - - -/** - * Create an OAuth2 client with the given credentials, and then execute the - * given callback function. - * - * @param {Object} credentials The authorization client credentials. - * @param {function} callback The callback to call with the authorized client. - */ -function authorize(credentials, callback) { - let clientSecret = credentials.installed.client_secret; - let clientId = credentials.installed.client_id; - let redirectUrl = credentials.installed.redirect_uris[0]; - let oauth2Client = new OAuth2(clientId, clientSecret, redirectUrl); - - // Check if we have previously stored a token. - fs.readFile(TOKEN_PATH, function (err, token) { - if (err) { - getNewToken(oauth2Client, callback); - } else { - oauth2Client.credentials = JSON.parse(token); - callback(oauth2Client); - } - }); -} - -/** - * Get and store new token after prompting for user authorization, and then - * execute the given callback with the authorized OAuth2 client. - * - * @param {google.auth.OAuth2} oauth2Client The OAuth2 client to get token for. - * @param {getEventsCallback} callback The callback to call with the authorized - * client. - */ -function getNewToken(oauth2Client, callback) { - var authUrl = oauth2Client.generateAuthUrl({ - access_type: 'offline', - scope: SCOPES - }); - console.log('Authorize this app by visiting this url: ', authUrl); - var rl = readline.createInterface({ - input: process.stdin, - output: process.stdout - }); - rl.question('Enter the code from that page here: ', function (code) { - rl.close(); - oauth2Client.getToken(code, function (err, token) { - if (err) { - console.log('Error while trying to retrieve access token', err); - return; - } - oauth2Client.credentials = token; - storeToken(token); - callback(oauth2Client); - }); - }); -} - -/** - * Store token to disk be used in later program executions. - * - * @param {Object} token The token to store to disk. - */ -function storeToken(token) { - try { - fs.mkdirSync(TOKEN_DIR); - } catch (err) { - if (err.code != 'EEXIST') { - throw err; - } - } - fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => { - if (err) throw err; - console.log('Token stored to ' + TOKEN_PATH); - }); - console.log('Token stored to ' + TOKEN_PATH); -} - -/** - * Lists the names and IDs of up to 10 files. - * - * @param {google.auth.OAuth2} auth An authorized OAuth2 client. - */ -function getChannel(auth) { - var service = google.youtube('v3'); - service.channels.list({ - auth: auth, - part: 'snippet,contentDetails,statistics', - forUsername: 'GoogleDevelopers' - }, function (err, response) { - if (err) { - console.log('The API returned an error: ' + err); - return; - } - var channels = response.data.items; - if (channels.length == 0) { - console.log('No channel found.'); - } else { - console.log('This channel\'s ID is %s. Its title is \'%s\', and ' + - 'it has %s views.', - channels[0].id, - channels[0].snippet.title, - channels[0].statistics.viewCount); - } - }); -} \ No newline at end of file diff --git a/src/server/Message.ts b/src/server/Message.ts index ee9142222..0fc5dd4b5 100644 --- a/src/server/Message.ts +++ b/src/server/Message.ts @@ -24,6 +24,10 @@ export interface Transferable { readonly data?: any; } +export enum YoutubeQueryTypes { + Channels +} + export interface Reference { readonly id: string; } @@ -45,5 +49,5 @@ export namespace MessageStore { export const GetRefFields = new Message("Get Ref Fields"); export const UpdateField = new Message("Update Ref Field"); export const CreateField = new Message("Create Ref Field"); - export const YoutubeApiKey = new Message("Youtube Api Key"); + export const YoutubeApiQuery = new Message("Youtube Api Query"); } diff --git a/src/server/Search.ts b/src/server/Search.ts index 5ca5578a7..d776480c6 100644 --- a/src/server/Search.ts +++ b/src/server/Search.ts @@ -14,7 +14,7 @@ export class Search { }); return res; } catch (e) { - console.warn("Search error: " + e + document); + // console.warn("Search error: " + e + document); } } diff --git a/src/server/index.ts b/src/server/index.ts index 2629519a7..b36cb0bf2 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 } from "./Message"; +import { MessageStore, Transferable, Types, Diff, YoutubeQueryTypes as YoutubeQueryType } from "./Message"; import { RouteStore } from './RouteStore'; const app = express(); const config = require('../../webpack.config'); @@ -37,15 +37,16 @@ import c = require("crypto"); import { Search } from './Search'; import { debug } from 'util'; import _ = require('lodash'); +import * as YoutubeApi from './youtubeApi/youtubeApiSample.js'; const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); -//let fs = require('fs'); -let readline = require('readline'); -let { google } = require('googleapis'); -let OAuth2 = google.auth.OAuth2; +// let { google } = require('googleapis'); +// let OAuth2 = google.auth.OAuth2; const download = (url: string, dest: fs.PathLike) => request.get(url).pipe(fs.createWriteStream(dest)); +let youtubeApiKey: string; +YoutubeApi.readApiKey((apiKey: string) => youtubeApiKey = apiKey); const mongoUrl = 'mongodb://localhost:27017/Dash'; mongoose.connect(mongoUrl); @@ -315,7 +316,7 @@ server.on("connection", function (socket: Socket) { Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteFields); Utils.AddServerHandler(socket, MessageStore.CreateField, CreateField); - Utils.AddServerHandlerCallback(socket, MessageStore.YoutubeApiKey, GetYoutubeApiKey); + Utils.AddServerHandlerCallback(socket, MessageStore.YoutubeApiQuery, HandleYoutubeQuery); Utils.AddServerHandler(socket, MessageStore.UpdateField, diff => UpdateField(socket, diff)); Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField); Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields); @@ -366,18 +367,14 @@ function GetRefFields([ids, callback]: [string[], (result?: Transferable[]) => v Database.Instance.getDocuments(ids, callback, "newDocuments"); } -function GetYoutubeApiKey(callback: (result?: string) => void) { - // Load client secrets from a local file. - fs.readFile('client_secret.json', function processClientSecrets(err: any, content: any) { - if (err) { - console.log('Error loading client secret file: ' + err); - return; - } - callback(content); - }); +function HandleYoutubeQuery([type, callback]: [YoutubeQueryType, (result?: string) => void]) { + switch (type) { + case YoutubeQueryType.Channels: + YoutubeApi.authorizedGetChannel(youtubeApiKey); + break; + } } - const suffixMap: { [type: string]: (string | [string, string | ((json: any) => any)]) } = { "number": "_n", "string": "_t", diff --git a/src/server/youtubeApi/youtubeApiSample.d.ts b/src/server/youtubeApi/youtubeApiSample.d.ts new file mode 100644 index 000000000..427f54608 --- /dev/null +++ b/src/server/youtubeApi/youtubeApiSample.d.ts @@ -0,0 +1,2 @@ +declare const YoutubeApi: any; +export = YoutubeApi; \ No newline at end of file diff --git a/src/server/youtubeApi/youtubeApiSample.js b/src/server/youtubeApi/youtubeApiSample.js new file mode 100644 index 000000000..7d5c936f5 --- /dev/null +++ b/src/server/youtubeApi/youtubeApiSample.js @@ -0,0 +1,135 @@ +const fs = require('fs'); +const readline = require('readline'); +const { google } = require('googleapis'); +const OAuth2 = google.auth.OAuth2; + + +// If modifying these scopes, delete your previously saved credentials +// at ~/.credentials/youtube-nodejs-quickstart.json +let SCOPES = ['https://www.googleapis.com/auth/youtube.readonly']; +let TOKEN_DIR = (process.env.HOME || process.env.HOMEPATH || + process.env.USERPROFILE) + '/.credentials/'; +let TOKEN_PATH = TOKEN_DIR + 'youtube-nodejs-quickstart.json'; + +module.exports.readApiKey = (callback) => { + fs.readFile('client_secret.json', function processClientSecrets(err, content) { + if (err) { + console.log('Error loading client secret file: ' + err); + return; + } + callback(content); + }); +} + +module.exports.authorizedGetChannel = (apiKey) => { + //this didnt get called + console.log("I get called"); + // Authorize a client with the loaded credentials, then call the YouTube API. + authorize(JSON.parse(apiKey), getChannel); +} + + +/** + * Create an OAuth2 client with the given credentials, and then execute the + * given callback function. + * + * @param {Object} credentials The authorization client credentials. + * @param {function} callback The callback to call with the authorized client. + */ +function authorize(credentials, callback) { + let clientSecret = credentials.installed.client_secret; + let clientId = credentials.installed.client_id; + let redirectUrl = credentials.installed.redirect_uris[0]; + let oauth2Client = new OAuth2(clientId, clientSecret, redirectUrl); + + // Check if we have previously stored a token. + fs.readFile(TOKEN_PATH, function (err, token) { + if (err) { + getNewToken(oauth2Client, callback); + } else { + oauth2Client.credentials = JSON.parse(token); + callback(oauth2Client); + } + }); +} + +/** + * Get and store new token after prompting for user authorization, and then + * execute the given callback with the authorized OAuth2 client. + * + * @param {google.auth.OAuth2} oauth2Client The OAuth2 client to get token for. + * @param {getEventsCallback} callback The callback to call with the authorized + * client. + */ +function getNewToken(oauth2Client, callback) { + var authUrl = oauth2Client.generateAuthUrl({ + access_type: 'offline', + scope: SCOPES + }); + console.log('Authorize this app by visiting this url: ', authUrl); + var rl = readline.createInterface({ + input: process.stdin, + output: process.stdout + }); + rl.question('Enter the code from that page here: ', function (code) { + rl.close(); + oauth2Client.getToken(code, function (err, token) { + if (err) { + console.log('Error while trying to retrieve access token', err); + return; + } + oauth2Client.credentials = token; + storeToken(token); + callback(oauth2Client); + }); + }); +} + +/** + * Store token to disk be used in later program executions. + * + * @param {Object} token The token to store to disk. + */ +function storeToken(token) { + try { + fs.mkdirSync(TOKEN_DIR); + } catch (err) { + if (err.code != 'EEXIST') { + throw err; + } + } + fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => { + if (err) throw err; + console.log('Token stored to ' + TOKEN_PATH); + }); + console.log('Token stored to ' + TOKEN_PATH); +} + +/** + * Lists the names and IDs of up to 10 files. + * + * @param {google.auth.OAuth2} auth An authorized OAuth2 client. + */ +function getChannel(auth) { + var service = google.youtube('v3'); + service.channels.list({ + auth: auth, + part: 'snippet,contentDetails,statistics', + forUsername: 'GoogleDevelopers' + }, function (err, response) { + if (err) { + console.log('The API returned an error: ' + err); + return; + } + var channels = response.data.items; + if (channels.length == 0) { + console.log('No channel found.'); + } else { + console.log('This channel\'s ID is %s. Its title is \'%s\', and ' + + 'it has %s views.', + channels[0].id, + channels[0].snippet.title, + channels[0].statistics.viewCount); + } + }); +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 530f38e60d6289a221a463ba36af2ed22c15d8d2 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 26 Jun 2019 17:54:16 -0400 Subject: Video Search Sample --- src/client/DocServer.ts | 4 ++++ src/client/apis/youtube/YoutubeBox.tsx | 1 + src/server/Message.ts | 2 +- src/server/index.ts | 2 ++ src/server/youtubeApi/youtubeApiSample.js | 25 ++++++++++++++++++++++++- 5 files changed, 32 insertions(+), 2 deletions(-) (limited to 'src/client/DocServer.ts') diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index 9dae54d74..b0060bfdc 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -52,6 +52,10 @@ export namespace DocServer { return apiKey; } + export function getYoutubeVideos() { + Utils.EmitCallback(_socket, MessageStore.YoutubeApiQuery, YoutubeQueryTypes.SearchVideo); + } + export async function GetRefFields(ids: string[]): Promise<{ [id: string]: Opt }> { const requestedIds: string[] = []; diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx index b029c51ec..dce891a07 100644 --- a/src/client/apis/youtube/YoutubeBox.tsx +++ b/src/client/apis/youtube/YoutubeBox.tsx @@ -19,6 +19,7 @@ export class YoutubeBox extends React.Component { componentWillMount() { DocServer.getYoutubeChannels(); + DocServer.getYoutubeVideos(); } _ignore = 0; diff --git a/src/server/Message.ts b/src/server/Message.ts index 0fc5dd4b5..87bb9d0fc 100644 --- a/src/server/Message.ts +++ b/src/server/Message.ts @@ -25,7 +25,7 @@ export interface Transferable { } export enum YoutubeQueryTypes { - Channels + Channels, SearchVideo } export interface Reference { diff --git a/src/server/index.ts b/src/server/index.ts index b36cb0bf2..3d4f59ee4 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -372,6 +372,8 @@ function HandleYoutubeQuery([type, callback]: [YoutubeQueryType, (result?: strin case YoutubeQueryType.Channels: YoutubeApi.authorizedGetChannel(youtubeApiKey); break; + case YoutubeQueryType.SearchVideo: + YoutubeApi.authorizedGetVideos(youtubeApiKey); } } diff --git a/src/server/youtubeApi/youtubeApiSample.js b/src/server/youtubeApi/youtubeApiSample.js index 7d5c936f5..35d74c62f 100644 --- a/src/server/youtubeApi/youtubeApiSample.js +++ b/src/server/youtubeApi/youtubeApiSample.js @@ -23,11 +23,16 @@ module.exports.readApiKey = (callback) => { module.exports.authorizedGetChannel = (apiKey) => { //this didnt get called - console.log("I get called"); + console.log("I get called ", apiKey); + console.log(TOKEN_PATH); // Authorize a client with the loaded credentials, then call the YouTube API. authorize(JSON.parse(apiKey), getChannel); } +module.exports.authorizedGetVideos = (apiKey) => { + authorize(JSON.parse(apiKey), getSampleVideos); +} + /** * Create an OAuth2 client with the given credentials, and then execute the @@ -132,4 +137,22 @@ function getChannel(auth) { channels[0].statistics.viewCount); } }); +} + +function getSampleVideos(auth) { + let service = google.youtube('v3'); + service.search.list({ + auth: auth, + part: 'id, snippet', + type: 'video', + q: 'istanbul', + maxResults: 3 + }, function (err, response) { + if (err) { + console.log('The API returned an error: ' + err); + return; + } + let videos = response.data.items; + console.log('Videos found: ' + videos[0].id.videoId, " ", videos[0].snippet.title); + }); } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 21bc14319013e4757ca24f56a685b7d75eaa259a Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 26 Jun 2019 19:15:50 -0400 Subject: Searching through document for a youtube video done --- src/client/DocServer.ts | 6 +++--- src/client/apis/youtube/YoutubeBox.tsx | 26 +++++++++++++++----------- src/server/Message.ts | 7 ++++++- src/server/index.ts | 8 ++++---- src/server/youtubeApi/youtubeApiSample.js | 12 ++++++------ 5 files changed, 34 insertions(+), 25 deletions(-) (limited to 'src/client/DocServer.ts') 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 { + @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 { 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 = ; - } else if (field instanceof WebField) { - view =