From a5da5e6246a6fd7500fed8b206fc3540be509eab Mon Sep 17 00:00:00 2001 From: Jenny Yu Date: Fri, 22 Apr 2022 19:53:44 -0400 Subject: uploading not working (cannot find ffmpeg) --- package-lock.json | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'package-lock.json') diff --git a/package-lock.json b/package-lock.json index 01763e9b6..0f045c546 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6535,6 +6535,14 @@ "pend": "~1.2.0" } }, + "ffmpeg": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/ffmpeg/-/ffmpeg-0.0.4.tgz", + "integrity": "sha1-HEYN+OfaUSf2LO70v6BsWciWMMs=", + "requires": { + "when": ">= 0.0.1" + } + }, "file-loader": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-3.0.1.tgz", @@ -7961,13 +7969,14 @@ "resolved": "https://registry.npmjs.org/image-size-stream/-/image-size-stream-1.1.0.tgz", "integrity": "sha1-Ivou2mbG31AQh0bacUkmSy0l+Gs=", "requires": { + "image-size": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1", "readable-stream": "^1.0.33", "tryit": "^1.0.1" }, "dependencies": { "image-size": { - "version": "git+https://github.com/netroy/image-size.git#da2c863807a3e9602617bdd357b0de3ab4a064c1", - "from": "git+https://github.com/netroy/image-size.git#da2c863807a3e9602617bdd357b0de3ab4a064c1" + "version": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1", + "from": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1" }, "isarray": { "version": "0.0.1", @@ -19577,6 +19586,11 @@ "webidl-conversions": "^3.0.0" } }, + "when": { + "version": "3.7.8", + "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz", + "integrity": "sha1-xxMLan6gRpPoQs3J56Hyqjmjn4I=" + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", -- cgit v1.2.3-70-g09d2 From 0a84982e2ea59d737f394bc79fa7f26a4bf29a80 Mon Sep 17 00:00:00 2001 From: Jenny Yu Date: Thu, 28 Apr 2022 16:01:49 -0400 Subject: feat: uploading works --- package-lock.json | 45 ++++++++++++++++++++-- src/client/Network.ts | 1 + .../views/nodes/RecordingBox/RecordingBox.tsx | 14 ++++++- .../views/nodes/RecordingBox/RecordingView.tsx | 23 ++++------- src/client/views/nodes/trails/PresElementBox.tsx | 2 + 5 files changed, 65 insertions(+), 20 deletions(-) (limited to 'package-lock.json') diff --git a/package-lock.json b/package-lock.json index 0f045c546..684caa92e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -768,9 +768,9 @@ "integrity": "sha512-BJJH2OXdUreVNdfTCuuO2oHoqBmXSnXtIQvbRYj3LwZ27nnzfY87D/KEUPXnCXj/56kEeVlBbvAbcKKeMRmkSw==", "dependencies": { "@typescript/lib-dom": { - "version": "npm:@types/web@0.0.61", - "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.61.tgz", - "integrity": "sha512-lQ4M3OSh8eFj55fz1RJsLhCubET/7duOXoKcxVaUXYXyxikD9BA+WWrqAn5CjJxrc82b7zFY4OCVIeVdkPLaGg==" + "version": "npm:@types/web@0.0.62", + "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.62.tgz", + "integrity": "sha512-NI9oDqfsnKHY/VI+4Uomw976LzopMphE2cCAv8cNNdd3LyA2aUolkipIDR5idnyX6Amq5oo2Lbdtj826h7gFjA==" } } }, @@ -4775,6 +4775,16 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "dev": true, + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + }, "d3-array": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", @@ -5882,6 +5892,28 @@ "is-symbol": "^1.0.2" } }, + "es5-ext": { + "version": "0.10.61", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.61.tgz", + "integrity": "sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA==", + "dev": true, + "requires": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "next-tick": "^1.1.0" + } + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=", + "dev": true, + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, "es6-promise": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", @@ -5893,6 +5925,7 @@ "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==", "dev": true, "requires": { + "d": "^1.0.1", "ext": "^1.1.2" } }, @@ -18441,6 +18474,12 @@ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, + "type": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", + "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==", + "dev": true + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", diff --git a/src/client/Network.ts b/src/client/Network.ts index 3597e7b2b..1255e5ce0 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -19,6 +19,7 @@ export namespace Networking { } export async function UploadFilesToServer(files: File | File[]): Promise[]> { + console.log(files) const formData = new FormData(); if (Array.isArray(files)) { if (!files.length) { diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 4c7fdd278..6f9451925 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -22,6 +22,12 @@ export class RecordingBox extends ViewBoxBaseComponent() { } @observable result: Upload.FileInformation | undefined = undefined + @observable videoDuration: number | undefined = undefined + + @action + setVideoDuration = (duration: number) => { + this.videoDuration = duration + } @action setResult = (info: Upload.FileInformation) => { @@ -29,6 +35,9 @@ export class RecordingBox extends ViewBoxBaseComponent() { this.result = info console.log(this.result.accessPaths.agnostic.client) this.dataDoc.type = DocumentType.VID; + console.log(this.videoDuration) + this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration; + this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey); this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined; this.layoutDoc._fitWidth = undefined; @@ -37,8 +46,9 @@ export class RecordingBox extends ViewBoxBaseComponent() { render() { return
- {!this.result ? : -

video box

} + {!this.result && } + {/* {!this.result ? : +

video box

} */}
; } } diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 16f750e14..6aed07c60 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -22,6 +22,7 @@ interface MediaSegment { interface IRecordingViewProps { setResult: (info: Upload.FileInformation) => void + setDuration: (seconds: number) => void } const MAXTIME = 1000; @@ -47,12 +48,12 @@ export function RecordingView(props: IRecordingViewProps) { const DEFAULT_MEDIA_CONSTRAINTS = { - video: true, + // video: true, // audio: true - // video: { - // width: 1280, - // height: 720, - // }, + video: { + width: 1280, + height: 720, + }, // audio: true, // audio: { // echoCancellation: true, @@ -64,6 +65,7 @@ export function RecordingView(props: IRecordingViewProps) { useEffect(() => { if (finished) { + props.setDuration(recordingTimer * 100) let allVideoChunks: any = [] console.log(videos) videos.forEach((vid) => { @@ -72,16 +74,7 @@ export function RecordingView(props: IRecordingViewProps) { }) console.log(allVideoChunks) - - const blob = new Blob(allVideoChunks, { - type: 'video/webm' - }) - const blobUrl = URL.createObjectURL(blob) - const videoFile = new File(allVideoChunks, "video", { type: allVideoChunks[0].type, lastModified: Date.now() }); - - videoElementRef.current!.srcObject = null - videoElementRef.current!.src = blobUrl - videoElementRef.current!.muted = false + const videoFile = new File(allVideoChunks, "video.mkv", { type: allVideoChunks[0].type, lastModified: Date.now() }); // const uploadVideo = async () => { // const [{ result }] = await Networking.UploadFilesToServer(videoFile); diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index aa7622736..92834fb07 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -290,6 +290,8 @@ export class PresElementBox extends ViewBoxBaseComponent() { console.log("x: ", pt[0], "y: ", pt[1]); recording.x = pt[0]; recording.y = pt[1]; + console.log(Doc.UserDoc().myOverlayDocs) + // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, this.rootDoc); Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording); } -- cgit v1.2.3-70-g09d2 From 99ae2ccde9dbcf6bae75edea231d4b10c736a692 Mon Sep 17 00:00:00 2001 From: Jenny Yu Date: Thu, 28 Apr 2022 17:09:13 -0400 Subject: feat: recording box turning into video + only one recording box --- package-lock.json | 44 ++++++++++++++-------- src/client/views/OverlayView.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 2 +- .../views/nodes/RecordingBox/RecordingBox.tsx | 4 +- src/client/views/nodes/trails/PresElementBox.tsx | 16 +++++--- 5 files changed, 44 insertions(+), 26 deletions(-) (limited to 'package-lock.json') diff --git a/package-lock.json b/package-lock.json index 684caa92e..691f56160 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4775,16 +4775,6 @@ "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=", "dev": true }, - "d": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", - "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", - "dev": true, - "requires": { - "es5-ext": "^0.10.50", - "type": "^1.0.1" - } - }, "d3-array": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", @@ -5812,8 +5802,8 @@ "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==" }, "equation-editor-react": { - "version": "github:bobzel/equation-editor-react#75915e852b4b36a6a4cd3e1cbc80598da6b65227", - "from": "github:bobzel/equation-editor-react#useLocally", + "version": "git+ssh://git@github.com/bobzel/equation-editor-react.git#75915e852b4b36a6a4cd3e1cbc80598da6b65227", + "from": "equation-editor-react@github:bobzel/equation-editor-react#useLocally", "requires": { "jquery": "^3.4.1", "mathquill": "^0.10.1-a" @@ -5912,6 +5902,18 @@ "d": "1", "es5-ext": "^0.10.35", "es6-symbol": "^3.1.1" + }, + "dependencies": { + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "dev": true, + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + } } }, "es6-promise": { @@ -5927,6 +5929,18 @@ "requires": { "d": "^1.0.1", "ext": "^1.1.2" + }, + "dependencies": { + "d": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz", + "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", + "dev": true, + "requires": { + "es5-ext": "^0.10.50", + "type": "^1.0.1" + } + } } }, "escalade": { @@ -8002,14 +8016,14 @@ "resolved": "https://registry.npmjs.org/image-size-stream/-/image-size-stream-1.1.0.tgz", "integrity": "sha1-Ivou2mbG31AQh0bacUkmSy0l+Gs=", "requires": { - "image-size": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1", + "image-size": "image-size@git+https://github.com/netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1", "readable-stream": "^1.0.33", "tryit": "^1.0.1" }, "dependencies": { "image-size": { - "version": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1", - "from": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1" + "version": "git+ssh://git@github.com/netroy/image-size.git#da2c863807a3e9602617bdd357b0de3ab4a064c1", + "from": "image-size@git+https://github.com/netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1" }, "isarray": { "version": "0.0.1", diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index 806abb990..f86406997 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -187,8 +187,8 @@ export class OverlayView extends React.Component { bringToFront={emptyFunction} addDocument={undefined} removeDocument={undefined} - PanelWidth={returnOne} - PanelHeight={returnOne} + PanelWidth={() => NumCast(d._width)} + PanelHeight={() => NumCast(d._height)} ScreenToLocalTransform={Transform.Identity} renderDepth={1} isDocumentActive={returnTrue} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 78c6c9776..f48173975 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1317,7 +1317,7 @@ export class DocumentView extends React.Component { const yshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined); const isPresTreeElement: boolean = this.props.treeViewDoc?.type === DocumentType.PRES; const isButton: boolean = this.props.Document.type === DocumentType.FONTICON || this.props.Document._viewType === CollectionViewType.Linear; - const isOverlay: boolean = CurrentUserUtils.OverlayDocs.includes(this.props.Document); + // const isOverlay: boolean = CurrentUserUtils.OverlayDocs.includes(this.props.Document); return (
{!this.props.Document || !this.props.PanelWidth() ? (null) : (
() { @action startRecording = (targetDoc: Doc, activeItem: Doc) => { - // TODO: Remove everything that already exists + // Remove every recording that already exists in overlay view + DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => { + if (doc.slides !== null) { + Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc); + } + }) + if (activeItem.recording) { // if we already have an existing recording Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null)); } else { // if we dont have any recording - console.log(targetDoc.title, activeItem.title); const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, title: "recording", system: true, cloneFieldFilter: new List(["system"]) }); + // attach the recording to the slide, and attach the slide to the recording + recording.slides = activeItem activeItem.recording = recording // TODO: Figure out exactly where we want the video to appear const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - console.log("x: ", pt[0], "y: ", pt[1]); recording.x = pt[0]; recording.y = pt[1]; - console.log(Doc.UserDoc().myOverlayDocs) - // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, this.rootDoc); Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording); } -- cgit v1.2.3-70-g09d2