aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/.DS_Storebin10244 -> 10244 bytes
-rw-r--r--src/client/documents/DocumentTypes.ts3
-rw-r--r--src/client/documents/Documents.ts112
-rw-r--r--src/client/util/CurrentUserUtils.ts1
-rw-r--r--src/client/views/collections/CollectionSubView.tsx25
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx2
-rw-r--r--src/client/views/nodes/LoadingBox.scss33
-rw-r--r--src/client/views/nodes/LoadingBox.tsx68
8 files changed, 218 insertions, 26 deletions
diff --git a/src/.DS_Store b/src/.DS_Store
index 4751acf44..4ed785983 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
Binary files differ
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 9dfadf778..d99cd2dac 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -26,6 +26,7 @@ export enum DocumentType {
FUNCPLOT = 'funcplot', // function plotter
MAP = 'map',
DATAVIZ = 'dataviz',
+ LOADING = 'loading',
// special purpose wrappers that either take no data or are compositions of lower level types
LINK = 'link',
@@ -63,5 +64,5 @@ export enum CollectionViewType {
Grid = 'grid',
Pile = 'pileup',
StackedTimeline = 'stacked timeline',
- NoteTaking = "notetaking"
+ NoteTaking = 'notetaking',
}
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7c50f21a5..9446eb70c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,4 +1,5 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { files } from 'jszip';
import { action, runInAction } from 'mobx';
import { basename } from 'path';
import { DateField } from '../../fields/DateField';
@@ -48,6 +49,7 @@ import { KeyValueBox } from '../views/nodes/KeyValueBox';
import { LabelBox } from '../views/nodes/LabelBox';
import { LinkBox } from '../views/nodes/LinkBox';
import { LinkDescriptionPopup } from '../views/nodes/LinkDescriptionPopup';
+import { LoadingBox } from '../views/nodes/LoadingBox';
import { MapBox } from '../views/nodes/MapBox/MapBox';
import { PDFBox } from '../views/nodes/PDFBox';
import { RecordingBox } from '../views/nodes/RecordingBox/RecordingBox';
@@ -648,6 +650,13 @@ export namespace Docs {
options: { _fitWidth: true, nativeDimModifiable: true, links: '@links(self)' },
},
],
+ [
+ DocumentType.LOADING,
+ {
+ layout: { view: LoadingBox, dataField: defaultDataKey },
+ options: { _fitWidth: true, _fitHeight: true, nativeDimModifiable: true, links: '@links(self)' },
+ },
+ ],
]);
const suffix = 'Proto';
@@ -786,7 +795,7 @@ export namespace Docs {
* only when creating a DockDocument from the current user's already existing
* main document.
*/
- function InstanceFromProto(proto: Doc, data: Field | undefined, options: DocumentOptions, delegId?: string, fieldKey: string = 'data', protoId?: string) {
+ function InstanceFromProto(proto: Doc, data: Field | undefined, options: DocumentOptions, delegId?: string, fieldKey: string = 'data', protoId?: string, placeholderDoc?: Doc) {
const viewKeys = ['x', 'y', 'system']; // keys that should be addded to the view document even though they don't begin with an "_"
const { omit: dataProps, extract: viewProps } = OmitKeys(options, viewKeys, '^_');
@@ -805,13 +814,27 @@ export namespace Docs {
// without this, if a doc has no annotations but the user has AddOnly privileges, they won't be able to add an annotation because they would have needed to create the field's list which they don't have permissions to do.
dataProps[fieldKey + '-annotations'] = new List<Doc>();
dataProps[fieldKey + '-sidebar'] = new List<Doc>();
- const dataDoc = Doc.assign(Doc.MakeDelegate(proto, protoId), dataProps, undefined, true);
+
+ // users placeholderDoc as proto if it exists
+ const dataDoc = Doc.assign(placeholderDoc ? Doc.GetProto(placeholderDoc) : Doc.MakeDelegate(proto, protoId), dataProps, undefined, true);
+
+ if (placeholderDoc) {
+ dataDoc.proto = proto;
+ }
const viewFirstProps: { [id: string]: any } = {};
viewFirstProps['acl-Public'] = options['_acl-Public'] ? options['_acl-Public'] : Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.Augment;
viewFirstProps['acl-Override'] = 'None';
viewFirstProps.author = Doc.CurrentUserEmail;
- const viewDoc = Doc.assign(Doc.MakeDelegate(dataDoc, delegId), viewFirstProps, true, true);
+ let viewDoc: Doc;
+ // determines whether viewDoc should be created using placeholder Doc or default
+ if (placeholderDoc) {
+ placeholderDoc._height = Number(options._height);
+ placeholderDoc._width = Number(options._width);
+ viewDoc = Doc.assign(placeholderDoc, viewFirstProps, true, true);
+ } else {
+ viewDoc = Doc.assign(Doc.MakeDelegate(dataDoc, delegId), viewFirstProps, true, true);
+ }
Doc.assign(viewDoc, viewProps, true, true);
![DocumentType.LINK, DocumentType.MARKER, DocumentType.LABEL].includes(viewDoc.type as any) && DocUtils.MakeLinkToActiveAudio(() => viewDoc);
@@ -826,9 +849,9 @@ export namespace Docs {
return viewDoc;
}
- export function ImageDocument(url: string | ImageField, options: DocumentOptions = {}) {
+ export function ImageDocument(url: string | ImageField, options: DocumentOptions = {}, overwriteDoc?: Doc) {
const imgField = url instanceof ImageField ? url : new ImageField(url);
- return InstanceFromProto(Prototypes.get(DocumentType.IMG), imgField, { title: basename(imgField.url.href), ...options });
+ return InstanceFromProto(Prototypes.get(DocumentType.IMG), imgField, { title: basename(imgField.url.href), ...options }, undefined, undefined, undefined, overwriteDoc);
}
export function PresDocument(options: DocumentOptions = {}) {
@@ -839,12 +862,12 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.SCRIPTING), script ? script : undefined, { ...options, layout: fieldKey ? ScriptingBox.LayoutString(fieldKey) : undefined });
}
- export function VideoDocument(url: string, options: DocumentOptions = {}) {
- return InstanceFromProto(Prototypes.get(DocumentType.VID), new VideoField(url), options);
+ export function VideoDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
+ return InstanceFromProto(Prototypes.get(DocumentType.VID), new VideoField(url), options, undefined, undefined, undefined, overwriteDoc);
}
- export function YoutubeDocument(url: string, options: DocumentOptions = {}) {
- return InstanceFromProto(Prototypes.get(DocumentType.YOUTUBE), new YoutubeField(url), options);
+ export function YoutubeDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
+ return InstanceFromProto(Prototypes.get(DocumentType.YOUTUBE), new YoutubeField(url), options, undefined, undefined, undefined, overwriteDoc);
}
export function WebCamDocument(url: string, options: DocumentOptions = {}) {
@@ -859,8 +882,16 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), '', options);
}
- export function AudioDocument(url: string, options: DocumentOptions = {}) {
- return InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(url), { ...options, backgroundColor: ComputedField.MakeFunction("this._mediaState === 'playing' ? 'green':'gray'") as any });
+ export function AudioDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
+ return InstanceFromProto(
+ Prototypes.get(DocumentType.AUDIO),
+ new AudioField(url),
+ { ...options, backgroundColor: ComputedField.MakeFunction("this._mediaState === 'playing' ? 'green':'gray'") as any },
+ undefined,
+ undefined,
+ undefined,
+ overwriteDoc
+ );
}
export function RecordingDocument(url: string, options: DocumentOptions = {}) {
@@ -875,6 +906,16 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.COLOR), '', options);
}
+ // Mapping of all loading docs to files, i.e. keeps track of files being uploaded in current session
+ export const docsToFiles = new Map<Doc, File | string>();
+
+ export function LoadingDocument(file: File | string, options: DocumentOptions, ytString?: string) {
+ const fileName = typeof file == 'string' ? file : file.name;
+ options.title = fileName;
+ const loading = InstanceFromProto(Prototypes.get(DocumentType.LOADING), fileName, { _height: 150, _width: 200, ...options });
+ return loading;
+ }
+
export function RTFDocument(field: RichTextField, options: DocumentOptions = {}, fieldKey: string = 'text') {
return InstanceFromProto(Prototypes.get(DocumentType.RTF), field, options, undefined, fieldKey);
}
@@ -964,13 +1005,13 @@ export namespace Docs {
return I;
}
- export function PdfDocument(url: string, options: DocumentOptions = {}) {
+ export function PdfDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
const width = options._width || undefined;
const height = options._height || undefined;
const nwid = options._nativeWidth || undefined;
const nhght = options._nativeHeight || undefined;
if (!nhght && width && height && nwid) options._nativeHeight = (Number(nwid) * Number(height)) / Number(width);
- return InstanceFromProto(Prototypes.get(DocumentType.PDF), new PdfField(url), options);
+ return InstanceFromProto(Prototypes.get(DocumentType.PDF), new PdfField(url), options, undefined, undefined, undefined, overwriteDoc);
}
export function WebDocument(url: string, options: DocumentOptions = {}) {
@@ -1101,8 +1142,8 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) });
}
- export function DataVizDocument(url: string, options?: DocumentOptions) {
- return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', ...options });
+ export function DataVizDocument(url: string, options?: DocumentOptions, overwriteDoc?: Doc) {
+ return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', ...options }, undefined, undefined, undefined, overwriteDoc);
}
export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
@@ -1433,8 +1474,16 @@ export namespace DocUtils {
return created;
}
- export async function DocumentFromType(type: string, path: string, options: DocumentOptions): Promise<Opt<Doc>> {
- let ctor: ((path: string, options: DocumentOptions) => Doc | Promise<Doc | undefined>) | undefined = undefined;
+ /**
+ *
+ * @param type the type of file.
+ * @param path the path to the file.
+ * @param options the document options.
+ * @param overwriteDoc the placeholder loading doc.
+ * @returns
+ */
+ export async function DocumentFromType(type: string, path: string, options: DocumentOptions, overwriteDoc?: Doc): Promise<Opt<Doc>> {
+ let ctor: ((path: string, options: DocumentOptions, overwriteDoc?: Doc) => Doc | Promise<Doc | undefined>) | undefined = undefined;
if (type.indexOf('image') !== -1) {
ctor = Docs.Create.ImageDocument;
if (!options._width) options._width = 300;
@@ -1483,7 +1532,7 @@ export namespace DocUtils {
options = { ...options, _width: 400, _height: 512, title: path };
}
- return ctor ? ctor(path, options) : undefined;
+ return ctor ? ctor(path, options, overwriteDoc) : undefined;
}
export function addDocumentCreatorMenuItems(docTextAdder: (d: Doc) => void, docAdder: (d: Doc) => void, x: number, y: number, simpleMenu: boolean = false, pivotField?: string, pivotValue?: string): void {
@@ -1699,14 +1748,14 @@ export namespace DocUtils {
return dd;
}
- async function processFileupload(generatedDocuments: Doc[], name: string, type: string, result: Error | Upload.FileInformation, options: DocumentOptions) {
+ async function processFileupload(generatedDocuments: Doc[], name: string, type: string, result: Error | Upload.FileInformation, options: DocumentOptions, rootDoc?: Doc) {
if (result instanceof Error) {
alert(`Upload failed: ${result.message}`);
return;
}
const full = { ...options, _width: 400, title: name };
const pathname = Utils.prepend(result.accessPaths.agnostic.client);
- const doc = await DocUtils.DocumentFromType(type, pathname, full);
+ const doc = await DocUtils.DocumentFromType(type, pathname, full, rootDoc);
if (doc) {
const proto = Doc.GetProto(doc);
proto.text = result.rawText;
@@ -1773,6 +1822,18 @@ export namespace DocUtils {
}
return generatedDocuments;
}
+
+ export function uploadYoutubeVideoLoading(videoId: string, options: DocumentOptions, overwriteDoc?: Doc) {
+ const generatedDocuments: Doc[] = [];
+ Networking.UploadYoutubeToServer(videoId).then(upfiles => {
+ const {
+ source: { name, type },
+ result,
+ } = upfiles.lastElement();
+ name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
+ });
+ }
+
export async function uploadFilesToDocs(files: File[], options: DocumentOptions) {
const generatedDocuments: Doc[] = [];
const upfiles = await Networking.UploadFilesToServer(files);
@@ -1785,6 +1846,17 @@ export namespace DocUtils {
return generatedDocuments;
}
+ export function uploadFileToDoc(file: File, options: DocumentOptions, overwriteDoc: Doc) {
+ const generatedDocuments: Doc[] = [];
+ Networking.UploadFilesToServer([file]).then(upfiles => {
+ const {
+ source: { name, type },
+ result,
+ } = upfiles.lastElement();
+ name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
+ });
+ }
+
// copies the specified drag factory document
export function copyDragFactory(dragFactory: Doc) {
if (!dragFactory) return undefined;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 2321d18ee..ca3d65ee5 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -196,6 +196,7 @@ export class CurrentUserUtils {
makeIconTemplate(DocumentType.RTF, "text", { iconTemplate:DocumentType.LABEL, _showTitle: "creationDate"}),
makeIconTemplate(DocumentType.IMG, "data", { iconTemplate:DocumentType.IMG, _height: undefined}),
makeIconTemplate(DocumentType.COL, "icon", { iconTemplate:DocumentType.IMG}),
+ makeIconTemplate(DocumentType.COL, "icon", { iconTemplate:DocumentType.IMG}),
makeIconTemplate(DocumentType.VID, "icon", { iconTemplate:DocumentType.IMG}),
makeIconTemplate(DocumentType.BUTTON,"data", { iconTemplate:DocumentType.FONTICON}),
//nasty hack .. templates are looked up exclusively by type -- but we want a template for a document with a certain field (transcription) .. so this hack and the companion hack in createCustomView does this for now
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index e33bb77de..e70cfb13c 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -446,6 +446,7 @@ export function CollectionSubView<X>(moreProps?: X) {
}
this.slowLoadDocuments(files, options, generatedDocuments, text, completed, e.clientX, e.clientY, addDocument).then(batch.end);
}
+
slowLoadDocuments = async (
files: File[] | string,
options: DocumentOptions,
@@ -456,11 +457,25 @@ export function CollectionSubView<X>(moreProps?: X) {
clientY: number,
addDocument: (doc: Doc | Doc[]) => boolean
) => {
- const disposer = OverlayView.Instance.addElement(<ReactLoading type={'spinningBubbles'} color={'green'} height={250} width={250} />, { x: clientX - 125, y: clientY - 125 });
+ // create placeholder docs
+ // inside placeholder docs have some func that
+
+ let pileUpDoc = undefined;
if (typeof files === 'string') {
- generatedDocuments.push(...(await DocUtils.uploadYoutubeVideo(files, options)));
+ const loading = Docs.Create.LoadingDocument(files, options);
+ generatedDocuments.push(loading);
+ Docs.Create.docsToFiles.set(loading, files);
+ DocUtils.uploadYoutubeVideoLoading(files, {}, loading);
} else {
- generatedDocuments.push(...(await DocUtils.uploadFilesToDocs(files, options)));
+ generatedDocuments.push(
+ ...files.map(file => {
+ const loading = Docs.Create.LoadingDocument(file, options);
+ // now that there is a doc do whatever slowload was going to do with that file
+ Docs.Create.docsToFiles.set(loading, file);
+ DocUtils.uploadFileToDoc(file, {}, loading);
+ return loading;
+ })
+ );
}
if (generatedDocuments.length) {
// Creating a dash document
@@ -476,7 +491,8 @@ export function CollectionSubView<X>(moreProps?: X) {
if (completed) completed(set);
else {
if (isFreeformView && generatedDocuments.length > 1) {
- addDocument(DocUtils.pileup(generatedDocuments, options.x as number, options.y as number)!);
+ pileUpDoc = DocUtils.pileup(generatedDocuments, options.x as number, options.y as number)!;
+ addDocument(pileUpDoc);
} else {
generatedDocuments.forEach(addDocument);
}
@@ -488,7 +504,6 @@ export function CollectionSubView<X>(moreProps?: X) {
alert('Document upload failed - possibly an unsupported file type.');
}
}
- disposer();
};
}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index d065c62fb..6d6609317 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -43,6 +43,7 @@ import { VideoBox } from './VideoBox';
import { WebBox } from './WebBox';
import React = require('react');
import XRegExp = require('xregexp');
+import { LoadingBox } from './LoadingBox';
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
@@ -266,6 +267,7 @@ export class DocumentContentsView extends React.Component<
DataVizBox,
HTMLtag,
ComparisonBox,
+ LoadingBox,
}}
bindings={bindings}
jsx={layoutFrame}
diff --git a/src/client/views/nodes/LoadingBox.scss b/src/client/views/nodes/LoadingBox.scss
new file mode 100644
index 000000000..f6912f547
--- /dev/null
+++ b/src/client/views/nodes/LoadingBox.scss
@@ -0,0 +1,33 @@
+.loadingBoxContainer {
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ justify-content: center;
+ background-color: #fdfdfd;
+}
+
+.textContainer {
+ margin: 5px;
+}
+
+.textContainer {
+ justify-content: center;
+ align-content: center;
+}
+
+.textContainer,
+.text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 80%;
+ text-align: center;
+}
+
+.headerText {
+ text-align: center;
+ font-weight: bold;
+}
+
+.spinner {
+ text-align: center;
+}
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
new file mode 100644
index 000000000..90bf90095
--- /dev/null
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -0,0 +1,68 @@
+import { observer } from 'mobx-react';
+import { ViewBoxAnnotatableComponent } from '../DocComponent';
+import { FieldView, FieldViewProps } from './FieldView';
+import * as React from 'react';
+import './LoadingBox.scss';
+import ReactLoading from 'react-loading';
+import { StrCast } from '../../../fields/Types';
+import { computed } from 'mobx';
+import { Docs } from '../../documents/Documents';
+
+/**
+ * LoadingBox Class represents a placeholder doc for documents that are currently
+ * being uploaded to the server and being fetched by the client. The LoadingBox doc is then used to
+ * generate the actual type of doc that is required once the document has been successfully uploaded.
+ *
+ * Design considerations:
+ * We are using the docToFiles map in Documents to keep track of all files being uploaded in one session of the client.
+ * If the file is not found we assume an error has occurred with the file upload, e.g. it has been interrupted by a client refresh
+ * or network issues. The docToFiles essentially gets reset everytime the page is refreshed.
+ *
+ * TODOs:
+ * 1) ability to query server to retrieve files that already exist if users upload duplicate files.
+ * 2) ability to restart upload if there is an error
+ * 3) detect network error and notify the user
+ * 4 )if file upload gets interrupted, it still gets uploaded to the server if there are no network interruptions which leads to unused space. this could be
+ * handled with (1)
+ * 5) Fixing the stacking view bug
+ * 6) Fixing the CSS
+ *
+ * @author naafiyan
+ */
+@observer
+export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+ public static LayoutString(fieldKey: string) {
+ return FieldView.LayoutString(LoadingBox, fieldKey);
+ }
+
+ /**
+ * Returns true if file is uploading, false otherwise
+ */
+ @computed private get isLoading(): boolean {
+ const file = Docs.Create.docsToFiles.get(this.rootDoc);
+ return file ? true : false;
+ }
+
+ constructor(props: any) {
+ super(props);
+ }
+
+ render() {
+ return (
+ <div className="loadingBoxContainer">
+ {this.isLoading ? (
+ <div className="textContainer">
+ <p className="headerText">Loading:</p>
+ <span className="text">{StrCast(this.rootDoc.title)}</span>
+ <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
+ </div>
+ ) : (
+ <div className="textContainer">
+ <p className="headerText">Error Loading File: </p>
+ <span className="text">{StrCast(this.rootDoc.title)}</span>
+ </div>
+ )}
+ </div>
+ );
+ }
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:55:58 +0000