From b3964f3be3ec6208b7a9ccf0a26fb5fea861c29b Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Wed, 10 Jul 2019 20:27:25 -0400 Subject: Refactored how History stuff works to make readonly work better --- package.json | 1 + 1 file changed, 1 insertion(+) (limited to 'package.json') diff --git a/package.json b/package.json index 51d1bab5d..85fc7f1be 100644 --- a/package.json +++ b/package.json @@ -164,6 +164,7 @@ "prosemirror-transform": "^1.1.3", "prosemirror-view": "^1.8.3", "pug": "^2.0.3", + "query-string": "^6.8.1", "raw-loader": "^1.0.0", "react": "^16.8.4", "react-anime": "^2.2.0", -- cgit v1.2.3-70-g09d2 From 3a4a7ba1f35eeba7d48c954f80a92c6904e5d065 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 12 Jul 2019 11:35:25 -0400 Subject: playing with videos --- package.json | 4 +++- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/VideoBox.tsx | 27 ++++++++++++++++++++++----- src/client/views/nodes/WebBox.tsx | 35 ++++++++++++++++++++++++++++++++++- 4 files changed, 60 insertions(+), 8 deletions(-) (limited to 'package.json') diff --git a/package.json b/package.json index 85fc7f1be..6681c4c1c 100644 --- a/package.json +++ b/package.json @@ -103,6 +103,7 @@ "@types/typescript": "^2.0.0", "@types/uuid": "^3.4.4", "@types/webpack": "^4.4.25", + "@types/youtube": "0.0.38", "async": "^2.6.2", "babel-runtime": "^6.26.0", "bcrypt-nodejs": "0.0.3", @@ -195,6 +196,7 @@ "typescript-collections": "^1.3.2", "url-loader": "^1.1.2", "uuid": "^3.3.2", - "xoauth2": "^1.2.0" + "xoauth2": "^1.2.0", + "youtube": "^0.1.0" } } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 30e4637b0..2a3827782 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -118,7 +118,7 @@ export namespace Docs { options: { nativeWidth: 600, curPage: 0 } }], [DocumentType.WEB, { - layout: { view: WebBox }, + layout: { view: WebBox, collectionView: [CollectionView, data, anno] as CollectionViewType }, options: { height: 300 } }], [DocumentType.COL, { diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index c65dfe0bd..895d9a422 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -70,6 +70,18 @@ export class VideoBox extends DocComponent(VideoD componentDidMount() { if (this.props.setVideoBox) this.props.setVideoBox(this); + + let field = Cast(this.Document[this.props.fieldKey], VideoField); + if (field && field.url.href.indexOf("youtube") !== -1) { + let youtubeaspect = 400 / 315; + var nativeWidth = FieldValue(this.Document.nativeWidth, 0); + var nativeHeight = FieldValue(this.Document.nativeHeight, 0); + if (!nativeWidth || !nativeHeight || Math.abs(nativeWidth / nativeHeight - youtubeaspect) > 0.05) { + if (!this.Document.nativeWidth) this.Document.nativeWidth = 600; + this.Document.nativeHeight = this.Document.nativeWidth / youtubeaspect; + this.Document.height = FieldValue(this.Document.width, 0) / youtubeaspect; + } + } } componentWillUnmount() { this.Pause(); @@ -145,12 +157,17 @@ export class VideoBox extends DocComponent(VideoD // }); // // - let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive"; + let interactive = InkingControl.Instance.selectedTool || !this.props.isSelected() ? "" : "-interactive"; let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : interactive); + let videoid = field ? ((arr: string[]) => arr[arr.length - 1])(field.url.href.split("/")) : ""; return !field ?
Loading
: - ; + field.url.href.indexOf("youtube") !== -1 ? + + : + ; } } \ No newline at end of file diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 98c57fc75..96b972a1c 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -6,12 +6,45 @@ import { InkingControl } from "../InkingControl"; import { FieldView, FieldViewProps } from './FieldView'; import "./WebBox.scss"; import React = require("react"); +import { InkTool } from "../../../new_fields/InkField"; +import { Cast, FieldValue, NumCast } from "../../../new_fields/Types"; +export function onYouTubeIframeAPIReady() { + console.log("player"); + return; + let player = new YT.Player('player', { + events: { + 'onReady': onPlayerReady + } + }); +} +// must cast as any to set property on window +const _global = (window /* browser */ || global /* node */) as any +_global.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady; + +function onPlayerReady(event: any) { + event.target.playVideo(); +} @observer export class WebBox extends React.Component { public static LayoutString() { return FieldView.LayoutString(WebBox); } + componentWillMount() { + + let field = Cast(this.props.Document[this.props.fieldKey], WebField); + if (field && field.url.href.indexOf("youtube") !== -1) { + let youtubeaspect = 400 / 315; + var nativeWidth = NumCast(this.props.Document.nativeWidth, 0); + var nativeHeight = NumCast(this.props.Document.nativeHeight, 0); + if (!nativeWidth || !nativeHeight || Math.abs(nativeWidth / nativeHeight - youtubeaspect) > 0.05) { + if (!nativeWidth) this.props.Document.nativeWidth = 600; + this.props.Document.nativeHeight = NumCast(this.props.Document.nativeWidth) / youtubeaspect; + this.props.Document.height = NumCast(this.props.Document.width) / youtubeaspect; + } + } + } + _ignore = 0; onPreWheel = (e: React.WheelEvent) => { this._ignore = e.timeStamp; @@ -46,7 +79,7 @@ export class WebBox extends React.Component { let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting; - let classname = "webBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !DocumentDecorations.Instance.Interacting ? "-interactive" : ""); + let classname = "webBox-cont" + (this.props.isSelected() && InkingControl.Instance.selectedTool === InkTool.None && !DocumentDecorations.Instance.Interacting ? "-interactive" : ""); return ( <>
-- cgit v1.2.3-70-g09d2 From 8e45625865b20a9e25b120d6938d3ec31aa880e3 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 13 Jul 2019 20:12:27 -0400 Subject: Kinda added auto complete --- package.json | 2 ++ src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/MetadataEntryMenu.tsx | 49 ++++++++++++++++++++++++++++++-- 3 files changed, 50 insertions(+), 3 deletions(-) (limited to 'package.json') diff --git a/package.json b/package.json index 6681c4c1c..22b3a6b21 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "@types/prosemirror-view": "^1.3.1", "@types/pug": "^2.0.4", "@types/react": "^16.8.7", + "@types/react-autosuggest": "^9.3.9", "@types/react-color": "^2.14.1", "@types/react-measure": "^2.0.4", "@types/react-table": "^6.7.22", @@ -169,6 +170,7 @@ "raw-loader": "^1.0.0", "react": "^16.8.4", "react-anime": "^2.2.0", + "react-autosuggest": "^9.4.3", "react-bootstrap": "^1.0.0-beta.5", "react-bootstrap-dropdown-menu": "^1.1.15", "react-color": "^2.17.0", diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 56fbd75a0..2cb3de50f 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -639,7 +639,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> return (
SelectionManager.SelectedDocuments().map(dv => dv.props.Document)} />}>{/* tfs: @bcz This might need to be the data document? */} + content={ SelectionManager.SelectedDocuments().map(dv => dv.props.Document)} suggestWithFunction />}>{/* tfs: @bcz This might need to be the data document? */}
diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 0dc7e0220..0c8fd3909 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -1,20 +1,23 @@ import * as React from 'react'; import "./MetadataEntryMenu.scss"; import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import { observable, action, runInAction } from 'mobx'; import { KeyValueBox } from './nodes/KeyValueBox'; import { Doc } from '../../new_fields/Doc'; +import * as Autosuggest from 'react-autosuggest'; export type DocLike = Doc | Doc[] | Promise | Promise; export interface MetadataEntryProps { docs: DocLike | (() => DocLike); onError?: () => boolean; + suggestWithFunction?: boolean; } @observer export class MetadataEntryMenu extends React.Component{ @observable private _currentKey: string = ""; @observable private _currentValue: string = ""; + @observable private suggestions: string[] = []; @action onKeyChange = (e: React.ChangeEvent) => { @@ -61,11 +64,53 @@ export class MetadataEntryMenu extends React.Component{ this._currentValue = ""; } + getKeySuggestions = async (value: string): Promise => { + value = value.toLowerCase(); + let docs = this.props.docs; + if (typeof docs === "function") { + if (this.props.suggestWithFunction) { + docs = docs(); + } else { + return []; + } + } + docs = await docs; + if (docs instanceof Doc) { + return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value)); + } else { + const keys = new Set(); + docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); + return Array.from(keys).filter(key => key.toLowerCase().startsWith(value)); + } + } + getSuggestionValue = (suggestion: string) => suggestion; + + renderSuggestion = (suggestion: string) => { + return

{suggestion}

; + } + + onSuggestionFetch = async ({ value }: { value: string }) => { + const sugg = await this.getKeySuggestions(value); + runInAction(() => { + this.suggestions = sugg; + }); + } + + @action + onSuggestionClear = () => { + this.suggestions = []; + } + render() { return (
Key: - + Value:
-- cgit v1.2.3-70-g09d2