Dash Web

{this.editableTitle}

@@ -1029,7 +1029,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.progressivizeDropdown}

: null}

} */} - {/* {!selectedItem || (!scrollable && !pannable) ? (null) :

+ {!selectedItem ? (null) :

{ this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> @@ -1041,7 +1041,7 @@ export class PropertiesView extends React.Component { {this.openSlideOptions ?

{PresBox.Instance.optionsDropdown}

: null} -

} */} +

} {/*

{ this.openAddSlide = !this.openAddSlide; })} diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 7f8f57088..4c0073dcc 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -442,8 +442,8 @@ export class TabDocView extends React.Component { let docColor = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor)); if (!docColor) { switch (doc?.type) { - case DocumentType.PRESELEMENT: docColor = TabDocView.darkScheme ? "dimgrey" : ""; break; - case DocumentType.PRES: docColor = TabDocView.darkScheme ? "#3e3e3e" : "black"; break; + case DocumentType.PRESELEMENT: docColor = TabDocView.darkScheme ? "" : ""; break; + case DocumentType.PRES: docColor = TabDocView.darkScheme ? "#3e3e3e" : "white"; break; case DocumentType.FONTICON: docColor = "black"; break; case DocumentType.RTF: docColor = TabDocView.darkScheme ? "#2d2d2d" : "#f1efeb"; case DocumentType.LABEL: diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 4f6c5cebe..1bdba7f9e 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -27,6 +27,8 @@ import Waveform from "react-audio-waveform"; import axios from "axios"; import { SnappingManager } from "../../util/SnappingManager"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { LinkDocPreview } from "./LinkDocPreview"; +import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment"; declare class MediaRecorder { // whatever MediaRecorder has @@ -49,6 +51,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.layoutDoc.scrollToLinkID, + this._disposers.linkPlay = reaction(() => this.layoutDoc.scrollToLinkID, scrollLinkId => { if (scrollLinkId) { DocListCast(this.dataDoc.links).filter(l => l[Id] === scrollLinkId).map(l => { @@ -130,7 +134,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent SelectionManager.SelectedDocuments(), + this._disposers.reaction = reaction(() => SelectionManager.SelectedDocuments(), selected => { const sel = selected.length ? selected[0].props.Document : undefined; let link; @@ -145,7 +149,22 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); + this._disposers.scrubbing = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); + + this._disposers._audioStart = reaction( + () => this.Document._audioStart, + (audioStart) => { + if (audioStart !== undefined) { + if (this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) { + const delay = this._audioRef.current ? 0 : 250; // wait for mainCont and try again to play + const startTime: number = NumCast(this.Document._audioStart); + setTimeout(() => this._audioRef.current && this.playFrom(startTime), delay); + setTimeout(() => { this.Document._currentTimecode = startTime; this.Document._audioStart = undefined; }, 10 + delay); + } + } + }, + { fireImmediately: true } + ); } playLink = (doc: Doc) => { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index fa58a67b6..dd6e368e8 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -117,7 +117,7 @@ export class PresBox extends ViewBoxBaseComponent if (Doc.UserDoc().activePresentation = this.rootDoc) runInAction(() => PresBox.Instance = this); if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ - title: "pres element template", type: DocumentType.PRESELEMENT, backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" + title: "pres element template", type: DocumentType.PRESELEMENT, _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" })); // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent @@ -191,7 +191,9 @@ export class PresBox extends ViewBoxBaseComponent // 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played nextAudioVideo = (targetDoc: Doc, activeItem: Doc) => { - if (targetDoc.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeItem.presStartTime)); + if (targetDoc.type === DocumentType.AUDIO) { + targetDoc._audioStart = NumCast(activeItem.presStartTime); + } // if (targetDoc.type === DocumentType.VID) { VideoBox.Instance.Play() }; activeItem.playNow = false; } @@ -201,13 +203,12 @@ export class PresBox extends ViewBoxBaseComponent const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected); - // const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); + const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); // If next slide is audio / video 'Play automatically' then the next slide should be played - // if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) { - // console.log('play next automatically'); - // if (targetNext.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeNext.presStartTime)); - // // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() }; - // } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); } + if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) { + if (targetNext.type === DocumentType.AUDIO) targetNext._audioStart = NumCast(activeNext.presStartTime); + // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() }; + } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); } } // Called when the user activates 'next' - to move to the next part of the pres. trail @@ -229,11 +230,10 @@ export class PresBox extends ViewBoxBaseComponent } else if (this.childDocs[this.itemIndex + 1] === undefined && this.layoutDoc.presLoop) { // Case 4: Last slide and presLoop is toggled ON this.gotoDocument(0); + } else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeItem.playAuto && activeItem.playNow && this.layoutDoc.presStatus !== PresStatus.Autoplay) { + // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played + this.nextAudioVideo(targetDoc, activeItem); } - // else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeItem.playAuto && activeItem.playNow && this.layoutDoc.presStatus !== PresStatus.Autoplay) { - // // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played - // this.nextAudioVideo(targetDoc, activeItem); - // } } // Called when the user activates 'back' - to move to the previous part of the pres. trail @@ -1927,7 +1927,7 @@ export class PresBox extends ViewBoxBaseComponent

*/}

{"View paths"}

}> -

1 ? 1 : 0.3, color: this._pathBoolean ? PresColor.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> +

1 && this.layoutDoc.presCollection ? 1 : 0.3, color: this._pathBoolean ? PresColor.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 && this.layoutDoc.presCollection ? this.viewPaths : undefined}>

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 8d4bd4b8b..49049b805 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -305,10 +305,12 @@ export class PresElementBox extends ViewBoxBaseComponent {miniView ? + // when width is LESS than 110 px

{`${this.indexInPres + 1}.`}

: + // when width is MORE than 110 px

{`${this.indexInPres + 1}.`}

} -- cgit v1.2.3-70-g09d2 From c4016e01b48367f45bed0ba2041e955c8c009464 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Sat, 28 Nov 2020 06:05:44 +0800 Subject: pres trail colors + group with up --- src/Utils.ts | 43 ++++++++++++++++++++++ src/client/views/collections/TabDocView.tsx | 1 + .../collections/collectionFreeForm/MarqueeView.tsx | 1 + src/client/views/nodes/PresBox.tsx | 2 +- .../views/presentationview/PresElementBox.scss | 10 +++-- .../views/presentationview/PresElementBox.tsx | 29 ++++++++++----- 6 files changed, 73 insertions(+), 13 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/Utils.ts b/src/Utils.ts index daacca51d..1a00c0bfb 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -549,6 +549,49 @@ export function simulateMouseClick(element: Element | null | undefined, x: numbe })); } +export function lightOrDark(color: any) { + + // Variables for red, green, blue values + var r, g, b, hsp; + + // Check the format of the color, HEX or RGB? + if (color.match(/^rgb/)) { + + // If RGB --> store the red, green, blue values in separate variables + color = color.match(/^rgba?$(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?$$/); + + r = color[1]; + g = color[2]; + b = color[3]; + } + else { + + // If hex --> Convert it to RGB: http://gist.github.com/983661 + color = +("0x" + color.slice(1).replace( + color.length < 5 && /./g, '$&$&')); + + r = color >> 16; + g = color >> 8 & 255; + b = color & 255; + } + + // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html + hsp = Math.sqrt( + 0.299 * (r * r) + + 0.587 * (g * g) + + 0.114 * (b * b) + ); + + // Using the HSP value, determine whether the color is light or dark + if (hsp > 127.5) { + return 'light'; + } + else { + + return 'dark'; + } +} + export function setupMoveUpEvents( target: object, e: React.PointerEvent, diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 4c0073dcc..45fab480c 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -166,6 +166,7 @@ export class TabDocView extends React.Component { pinDoc.presentationTargetDoc = doc; pinDoc.title = doc.title + " - Slide"; pinDoc.presMovement = PresMovement.Zoom; + pinDoc.groupWithUp = false; pinDoc.context = curPres; const presArray: Doc[] = PresBox.Instance?.sortArray(); const size: number = PresBox.Instance?._selectedArray.size; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 0eb05500c..c4d51f986 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -404,6 +404,7 @@ export class MarqueeView extends React.Component= 300; const miniView: boolean = this.toolbarWidth <= 110; + const presBox: Doc = this.presBox; //presBox + const presBoxColor: string = StrCast(presBox._backgroundColor); + const lightPresBoxColor: boolean = lightOrDark(presBoxColor) === 'light'; const targetDoc: Doc = this.targetDoc; const activeItem: Doc = this.rootDoc; return ( -

{ e.stopPropagation(); e.preventDefault(); @@ -314,7 +321,11 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.indexInPres + 1}.`}

} - {miniView ? (null) :

+ {miniView ? (null) :

this.updateView(targetDoc, activeItem)} style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V

- {/*

{"Group with up"}

}> +

{"Group with up"}

activeItem.groupWithUp = !activeItem.groupWithUp} - style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}> - e.stopPropagation()} /> + style={{ fontWeight: 700, backgroundColor: activeItem.groupWithUp ? PresColor.DarkBlue : "none" }}> + e.stopPropagation()} />

- */} +

{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}

{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} />

-- cgit v1.2.3-70-g09d2 From e72068df41088f2bd842733f0e45cdfb4d28e6de Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Sun, 29 Nov 2020 13:24:34 +0800 Subject: pres trails temporal media and fixing group with up --- src/client/views/MainView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/collections/TabDocView.tsx | 6 +- src/client/views/nodes/PresBox.tsx | 116 ++++++++++++++------- .../views/presentationview/PresElementBox.tsx | 2 +- 5 files changed, 83 insertions(+), 45 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index b1e008dad..3c46e0f89 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -148,7 +148,7 @@ export class MainView extends React.Component { fa.faSearch, fa.faFileDownload, fa.faFileUpload, fa.faStop, fa.faCalculator, fa.faWindowMaximize, fa.faAddressCard, fa.faQuestionCircle, fa.faArrowLeft, fa.faArrowRight, fa.faArrowDown, fa.faArrowUp, fa.faBolt, fa.faBullseye, fa.faCaretUp, fa.faCat, fa.faCheck, fa.faChevronRight, fa.faChevronLeft, fa.faChevronDown, fa.faChevronUp, fa.faClone, fa.faCloudUploadAlt, fa.faCommentAlt, fa.faCompressArrowsAlt, fa.faCut, fa.faEllipsisV, fa.faEraser, fa.faExclamation, fa.faFileAlt, - fa.faFileAudio, fa.faFilePdf, fa.faFilm, fa.faFilter, fa.faFont, fa.faGlobeAmericas, fa.faGlobeAsia, fa.faHighlighter, fa.faLongArrowAltRight, fa.faMousePointer, + fa.faFileAudio, fa.faFileVideo, fa.faFilePdf, fa.faFilm, fa.faFilter, fa.faFont, fa.faGlobeAmericas, fa.faGlobeAsia, fa.faHighlighter, fa.faLongArrowAltRight, fa.faMousePointer, fa.faMusic, fa.faObjectGroup, fa.faPause, fa.faPen, fa.faPenNib, fa.faPhone, fa.faPlay, fa.faPortrait, fa.faRedoAlt, fa.faStamp, fa.faStickyNote, fa.faTimesCircle, fa.faThumbtack, fa.faTree, fa.faTv, fa.faUndoAlt, fa.faVideo, fa.faAsterisk, fa.faBrain, fa.faImage, fa.faPaintBrush, fa.faTimes, fa.faEye, fa.faArrowsAlt, fa.faQuoteLeft, fa.faSortAmountDown, fa.faAlignLeft, fa.faAlignCenter, fa.faAlignRight, fa.faHeading, fa.faRulerCombined, diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 35331cc15..4b3393e14 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -290,7 +290,7 @@ export class CollectionStackingView extends CollectionSubView (pos[axis] + pos1[axis]) / 2 ? 1 : 0; } }); - // const oldDocs = this.childDocs.length; + const oldDocs = this.childDocs.length; if (super.onInternalDrop(e, de)) { const droppedDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs); // if the drop operation adds something to the end of the list, then use that as the new document (may be different than what was dropped e.g., in the case of a button which is dropped but which creates say, a note). const newDocs = droppedDocs.length ? droppedDocs : de.complete.docDragData.droppedDocuments; // if nothing was added to the end of the list, then presumably the dropped documents were already in the list, but possibly got reordered so we use them. diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 45fab480c..0f228bc06 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -172,9 +172,11 @@ export class TabDocView extends React.Component { const size: number = PresBox.Instance?._selectedArray.size; const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined; Doc.AddDocToList(curPres, "data", pinDoc, presSelected); - if (pinDoc.type === "audio" && !audioRange) { + if (pinDoc.type === DocumentType.AUDIO || pinDoc.type === DocumentType.VID && !audioRange) { + pinDoc.mediaStart = "manual"; + pinDoc.mediaStop = "manual"; pinDoc.presStartTime = 0; - pinDoc.presEndTime = doc.duration; + pinDoc.presEndTime = pinDoc.type === DocumentType.AUDIO ? doc.duration : NumCast(doc["data-duration"]); } if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true; const dview = CollectionDockingView.Instance.props.Document; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 9fb07040d..ed2cb9fa1 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -210,7 +210,7 @@ export class PresBox extends ViewBoxBaseComponent break; } else { console.log("Title: " + this.childDocs[nextSelected].title); - this.gotoDocument(nextSelected); + this.gotoDocument(nextSelected, true); } } const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); @@ -276,7 +276,7 @@ export class PresBox extends ViewBoxBaseComponent //The function that is called when a document is clicked or reached through next or back. //it'll also execute the necessary actions if presentation is playing. - public gotoDocument = action((index: number) => { + public gotoDocument = action((index: number, group?: boolean) => { Doc.UnBrushAllDocs(); if (index >= 0 && index < this.childDocs.length) { this.rootDoc._itemIndex = index; @@ -292,9 +292,9 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc?.lastFrame !== undefined) { presTargetDoc._currentFrame = 0; } - this._selectedArray.clear(); + if (!group) this._selectedArray.clear(); this.childDocs[index] && this._selectedArray.set(this.childDocs[index], undefined); //Update selected array - if (this.layoutDoc._viewType === "stacking") this.navigateToElement(this.childDocs[index]); //Handles movement to element only when presTrail is list + if (this.layoutDoc._viewType === "stacking" && !group) this.navigateToElement(this.childDocs[index]); //Handles movement to element only when presTrail is list this.onHideDocument(); //Handles hide after/before } }); @@ -1073,7 +1073,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get transitionDropdown() { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; - const type: DocumentType = targetDoc.type; + const type = targetDoc.type; const isPresCollection: boolean = (targetDoc === this.layoutDoc.presCollection); const isPinWithView: boolean = BoolCast(activeItem.presPinView); if (activeItem && targetDoc) { @@ -1103,7 +1103,7 @@ export class PresBox extends ViewBoxBaseComponent

}

Transition Speed

Movement Speed

{isPresCollection ? (null) :

{"Hide after presented"}

this.updateHideAfter(activeItem)}>Hide after

}

{"Open document in a new tab"}

this.updateOpenDoc(activeItem)}>Open

- {(type === DocumentType.AUDIO || type === DocumentType.VID) ? (null) :

Slide Duration

- this.setDurationTime(e.target.value))} /> s + {(type === DocumentType.AUDIO || type === DocumentType.VID) ? (null) : <> +

Slide Duration

+ this.setDurationTime(e.target.value))} /> s

this.setDurationTime(String(duration), 1000))}> - -

this.setDurationTime(String(duration), -1000))}> - +

this.setDurationTime(String(duration), 1000))}> + +

this.setDurationTime(String(duration), -1000))}> + +

} - { this._batch = UndoManager.StartBatch("presDuration"); }} - onPointerUp={() => { if (this._batch) this._batch.end(); }} - onChange={(e: React.ChangeEvent) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} - /> -

Short

Medium

Long

+ { this._batch = UndoManager.StartBatch("presDuration"); }} + onPointerUp={() => { if (this._batch) this._batch.end(); }} + onChange={(e: React.ChangeEvent) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} + /> +

Short

Medium

Long

+ }

{isPresCollection ? (null) :

Effects @@ -1368,24 +1370,24 @@ export class PresBox extends ViewBoxBaseComponent

activeItem.mediaPlay = "manual"} - checked={activeItem.mediaPlay === "manual"} + onChange={() => activeItem.mediaStart = "manual"} + checked={activeItem.mediaStart === "manual"} />

Start manually

activeItem.mediaPlay = "auto"} - checked={activeItem.mediaPlay === "auto"} + onChange={() => activeItem.mediaStart = "auto"} + checked={activeItem.mediaStart === "auto"} />

Play with slide

activeItem.mediaPlay = "onClick"} - checked={activeItem.mediaPlay === "onClick"} + onChange={() => activeItem.mediaStart = "onClick"} + checked={activeItem.mediaStart === "onClick"} />

Play on click

@@ -1432,8 +1434,42 @@ export class PresBox extends ViewBoxBaseComponent

Range:

+ Start time: +

+ Duration: +

+ End time: +

+ ) => { activeItem.presStartTime = Number(e.target.value); })} + /> s +

+ {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10} s +

+ ) => { activeItem.presEndTime = Number(e.target.value); })} + /> s +

- e.stopPropagation(); activeItem.presEndTime = Number(e.target.value); }} /> -

0 s

{Math.round(NumCast(activeItem.duration))} s

{activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} s

{/*

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 9ec39b792..23f0dbdee 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -117,7 +117,7 @@ export class PresElementBox extends ViewBoxBaseComponent Date: Mon, 30 Nov 2020 11:10:23 +0800 Subject: Audio updates --- src/client/views/PropertiesView.tsx | 4 +- src/client/views/collections/TabDocView.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 83 ++++++++++------------ .../views/presentationview/PresElementBox.tsx | 2 +- 4 files changed, 42 insertions(+), 49 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index c656a020e..bdba625f8 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1016,7 +1016,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.transitionDropdown}

: null}

} - {/* {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :

+ {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :

this.openPresProgressivize = !this.openPresProgressivize)} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}> @@ -1028,7 +1028,7 @@ export class PropertiesView extends React.Component { {this.openPresProgressivize ?

{PresBox.Instance.progressivizeDropdown}

: null} -

} */} +

} {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) :

{ this.openSlideOptions = !this.openSlideOptions; })} diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 0f228bc06..258cdc4f7 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -172,7 +172,7 @@ export class TabDocView extends React.Component { const size: number = PresBox.Instance?._selectedArray.size; const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined; Doc.AddDocToList(curPres, "data", pinDoc, presSelected); - if (pinDoc.type === DocumentType.AUDIO || pinDoc.type === DocumentType.VID && !audioRange) { + if (!audioRange && (pinDoc.type === DocumentType.AUDIO || pinDoc.type === DocumentType.VID)) { pinDoc.mediaStart = "manual"; pinDoc.mediaStop = "manual"; pinDoc.presStartTime = 0; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index ed2cb9fa1..54818f67e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -191,18 +191,20 @@ export class PresBox extends ViewBoxBaseComponent // 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played nextAudioVideo = (targetDoc: Doc, activeItem: Doc) => { if (targetDoc.type === DocumentType.AUDIO) { + console.log("play audio"); targetDoc._audioStart = NumCast(activeItem.presStartTime); - } else if (targetDoc.type === DocumentType.VID) { - targetDoc._currentTimecode = NumCast(activeItem.presStartTime); - setTimeout(() => targetDoc._videoStart = true, 0); + console.log("play video"); + targetDoc._videoStop = true; + setTimeout(() => targetDoc._currentTimecode = NumCast(activeItem.presStartTime), 10); + setTimeout(() => targetDoc._videoStart = true, 20); } - // if (targetDoc.type === DocumentType.VID) { VideoBox.Instance.Play() }; activeItem.playNow = false; } // No more frames in current doc and next slide is defined, therefore move to next slide nextSlide = (targetDoc: Doc, activeNext: Doc) => { + const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); let nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected); for (nextSelected = nextSelected + 1; nextSelected < this.childDocs.length; nextSelected++) { @@ -213,11 +215,12 @@ export class PresBox extends ViewBoxBaseComponent this.gotoDocument(nextSelected, true); } } - const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); // If next slide is audio / video 'Play automatically' then the next slide should be played - if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) { - if (targetNext.type === DocumentType.AUDIO) targetNext._audioStart = NumCast(activeNext.presStartTime); - } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); } + if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && (activeNext.mediaStart === "auto" || activeNext.playNow)) { + this.nextAudioVideo(targetNext, activeNext); + } else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeNext.playNow && activeNext.mediaStart === "onClick") { + activeNext.playNow = true; + } } // Called when the user activates 'next' - to move to the next part of the pres. trail @@ -234,14 +237,11 @@ export class PresBox extends ViewBoxBaseComponent // Case 1: There are still other frames and should go through all frames before going to next slide this.nextInternalFrame(targetDoc, activeItem); } else if (this.childDocs[this.itemIndex + 1] !== undefined) { - // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide + // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide this.nextSlide(targetDoc, activeNext); - } else if (this.childDocs[this.itemIndex + 1] === undefined && this.layoutDoc.presLoop) { - // Case 4: Last slide and presLoop is toggled ON + } else if (this.childDocs[this.itemIndex + 1] === undefined && (this.layoutDoc.presLoop || this.layoutDoc.presStatus === PresStatus.Edit)) { + // Case 3: Last slide and presLoop is toggled ON or it is in Edit mode this.gotoDocument(0); - } else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeItem.playAuto && activeItem.playNow && this.layoutDoc.presStatus !== PresStatus.Autoplay) { - // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played - this.nextAudioVideo(targetDoc, activeItem); } } @@ -517,10 +517,9 @@ export class PresBox extends ViewBoxBaseComponent try { doc.opacity = 1; } catch (e) { - console.log("REset presentation error: ", e); + console.log("Reset presentation error: ", e); } }); - ///for (const doc of this.childDocs) Cast(doc.presentationTargetDoc, Doc, null).opacity = 1; } @action togglePath = (srcContext: Doc, off?: boolean) => { @@ -628,6 +627,8 @@ export class PresBox extends ViewBoxBaseComponent if (doc.type === DocumentType.LABEL) { const audio = Cast(doc.annotationOn, Doc, null); if (audio) { + audio.mediaStart = "manual"; + audio.mediaStop = "manual"; audio.presStartTime = NumCast(doc.audioStart); audio.presEndTime = NumCast(doc.audioEnd); audio.presDuration = NumCast(doc.audioEnd) - NumCast(doc.audioStart); @@ -1365,6 +1366,18 @@ export class PresBox extends ViewBoxBaseComponent

e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>

Range:

+ Start time: +

+ Duration: +

+ End time: +

Start playing:

@@ -1373,7 +1386,7 @@ export class PresBox extends ViewBoxBaseComponent onChange={() => activeItem.mediaStart = "manual"} checked={activeItem.mediaStart === "manual"} /> -

Start manually

Play manually

onChange={() => activeItem.mediaStart = "auto"} checked={activeItem.mediaStart === "auto"} /> -

Play with slide

- activeItem.mediaStart = "onClick"} - checked={activeItem.mediaStart === "onClick"} - /> -

Play on click

Play automatically (with slide)

Stop playing:

@@ -1400,7 +1405,7 @@ export class PresBox extends ViewBoxBaseComponent onChange={() => activeItem.mediaStop = "manual"} checked={activeItem.mediaStop === "manual"} /> -

Stop manually

Stop at end time

onChange={() => activeItem.mediaStop = "afterCurrent"} checked={activeItem.mediaStop === "afterCurrent"} /> -

After current slide

Stop automatically (current slide)

onChange={() => activeItem.mediaStop = "afterSlide"} checked={activeItem.mediaStop === "afterSlide"} /> -

After slide +

Stop after slide {activeItem.mediaStop !== "afterSlide" ? (null) : @@ -1433,18 +1438,6 @@ export class PresBox extends ViewBoxBaseComponent

Range:

- Start time: -

- Duration: -

- End time: -

@@ -1673,10 +1666,10 @@ export class PresBox extends ViewBoxBaseComponent return (

e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>

{ this.updateMinimize(); this.turnOffEdit(true); }))}> - Minimize + Mini-player

{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(true); }))}> - Sidebar view + Sidebar player

); @@ -1746,7 +1739,7 @@ export class PresBox extends ViewBoxBaseComponent return (

e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> - {/*

{this.stringType} selected

Contents

@@ -1772,7 +1765,7 @@ export class PresBox extends ViewBoxBaseComponent

Scroll

Edit

*/} +

Frames

diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 23f0dbdee..0d1defbfe 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -326,7 +326,7 @@ export class PresElementBox extends ViewBoxBaseComponent -