From 7d415bca08a17481d44d6bcd3b0df2672f6f5db0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 25 Sep 2021 12:30:35 -0400 Subject: added a hacky fix to what seems to be a Chrome bug when auto expanding the left flyout panel --- src/client/views/MainView.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 35c5801e5..7edcd6217 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -467,7 +467,13 @@ export class MainView extends React.Component { } expandFlyout = action((button: Doc) => { + // bcz: What's going on here!? + // Chrome(not firefox) seems to have a bug when the flyout expands and there's a zoomed freeform tab. All of the div below the CollectionFreeFormView's main div + // generate the wrong value from getClientRectangle() -- specifically they return an 'x' that is the flyout's width greater than it should be. + // interactively adjusting the flyout fixes the problem. So does programmatically changing the value after a timeout to something *fractionally* different (ie, 1.5, not 1);) this._leftMenuFlyoutWidth = (this._leftMenuFlyoutWidth || 250); + setTimeout(action(() => this._leftMenuFlyoutWidth += 0.5), 0); + this._sidebarContent.proto = button.target as any; this.LastButton = button; }); -- cgit v1.2.3-70-g09d2 From 7f08f0fec32a28e1dc19f00021f99352f55a045c Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 28 Oct 2021 15:12:34 -0400 Subject: fixed marker document decorations on scroll in zoomed timeline --- src/client/views/AudioWaveform.tsx | 2 +- src/client/views/MainView.tsx | 2 +- .../collections/CollectionStackedTimeline.scss | 32 +++--- .../collections/CollectionStackedTimeline.tsx | 16 ++- src/client/views/nodes/AudioBox.scss | 123 ++++++++++++--------- src/client/views/nodes/AudioBox.tsx | 43 ++++++- 6 files changed, 138 insertions(+), 80 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx index ca1dd6f36..58384792e 100644 --- a/src/client/views/AudioWaveform.tsx +++ b/src/client/views/AudioWaveform.tsx @@ -90,7 +90,7 @@ export class AudioWaveform extends React.Component { { const rect = this._timeline?.getBoundingClientRect(); - const scrollLeft = this._timeline?.scrollLeft; const clientX = e.clientX; const diff = rect ? clientX - rect?.x : null; const shiftKey = e.shiftKey; @@ -343,6 +344,11 @@ export class CollectionStackedTimeline extends CollectionSubView< ); } + @action + setScroll = (e: React.MouseEvent) => { + this._scroll = e.currentTarget.scrollLeft; + } + @action internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number) { if (!de.embedKey && this.props.layerProvider?.(this.props.Document) !== false && this.props.Document._isGroup) return false; @@ -533,7 +539,6 @@ export class CollectionStackedTimeline extends CollectionSubView< ); } @computed get renderAudioWaveform() { - console.log(this.props.mediaPath) return !this.props.mediaPath ? null : (
Math.max(m, o.level), 0) + 2; return (
+ style={{ width: this.props.PanelWidth() }} + onScroll={this.setScroll}>
(this._timeline = timeline)} @@ -616,7 +622,7 @@ export class CollectionStackedTimeline extends CollectionSubView< mark={d.anchor} rangeClickScript={this.rangeClickScript} rangePlayScript={this.rangePlayScript} - left={left} + left={left - this._scroll} top={top} width={width} height={height} diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index d466c6c3b..b3df7e79f 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -92,6 +92,62 @@ height: 100%; color: $white; + .audiobox-button { + margin: 2.5px; + cursor: pointer; + width: 25px; + height: 25px; + border-radius: 50%; + background: $dark-gray; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 15px; + } + + &:hover { + background: $black; + } + } + + svg { + width: 10px; + } + + input[type="range"] { + width: 70px; + -webkit-appearance: none; + background: none; + margin: 5px; + } + + input[type="range"]:focus { + outline: none; + } + + input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 6px; + cursor: pointer; + box-shadow: 0; + background: $light-gray; + border-radius: 3px; + } + + input[type="range"]::-webkit-slider-thumb { + box-shadow: 0; + border: 0; + height: 10px; + width: 10px; + border-radius: 10px; + background: $medium-blue; + cursor: pointer; + -webkit-appearance: none; + margin: -2px; + } + .audiobox-controls { display: flex; flex-direction: row; @@ -104,66 +160,20 @@ display: flex; flex-direction: row; width: 100px; - - .audiobox-button { - margin: 2.5px; - cursor: pointer; - width: 25px; - height: 25px; - border-radius: 50%; - background: $dark-gray; - display: flex; - align-items: center; - justify-content: center; - - svg { - width: 15px; - } - - &:hover { - background: $black; - } - } } .controls-right { display: flex; flex-direction: row; - svg { - width: 10px; - } - - input[type="range"] { - width: 70px; - -webkit-appearance: none; - background: none; - margin: 5px; - } - - input[type="range"]:focus { - outline: none; - } - - input[type="range"]::-webkit-slider-runnable-track { - width: 100%; - height: 6px; - cursor: pointer; - box-shadow: 0; - background: $light-gray; - border-radius: 3px; - } + .audiobox-button { + width: 15px; + height: 15px; + margin: 0; - input[type="range"]::-webkit-slider-thumb { - box-shadow: 0; - border: 0; - height: 10px; - width: 10px; - border-radius: 10px; - background: $medium-blue; - cursor: pointer; - -webkit-appearance: none; - margin: -2px; + svg { + width: 10px; + } } } } @@ -171,6 +181,7 @@ .audiobox-playback { width: 100%; height: calc(100% - 50px); + background: $white; .audiobox-timeline { height: 100%; @@ -193,5 +204,11 @@ height: 20px; padding: 3px; font-size: $small-text; + + .bottom-controls-middle { + display: flex; + flex-direction: row; + align-items: center; + } } } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 48e324971..3a3eb78e1 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -21,6 +21,7 @@ import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from "../DocComponent"; import "./AudioBox.scss"; import { FieldView, FieldViewProps } from "./FieldView"; +import { timeStamp } from "console"; declare class MediaRecorder { constructor(e: any); // whatever MediaRecorder has @@ -60,6 +61,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart); this.Pause(); + if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart); }, (end - start) * 1000); } else { @@ -260,6 +263,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this._ele?.pause(); this.mediaState = media_state.Paused; + // clearTimeout(this._play); // stops clip from jumping back to beginning } // creates a text document for dictation @@ -374,6 +378,23 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + if (this._ele) { + this._volume = volume; + this._ele.volume = volume; + } + } + + @action + toggleMute = (e: React.PointerEvent) => { + e.stopPropagation(); + if (this._ele) { + this._muted = !this._muted; + this._ele.muted = this._muted; + } + } + setupTimelineDrop = (r: HTMLDivElement | null) => { if (r && this.timeline) { this._dropDisposer?.(); @@ -434,11 +455,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent
- - + +
+ { e.stopPropagation(); }} - onChange={(e: React.ChangeEvent) => { this.zoom(Number(e.target.value)); }} + onChange={(e: React.ChangeEvent) => { this.setVolume(Number(e.target.value)) }} />
@@ -455,6 +480,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))}
+
+ + { e.stopPropagation(); }} + onChange={(e: React.ChangeEvent) => { this.zoom(Number(e.target.value)); }} + /> +
{this.timeline && formatTime(Math.round(NumCast(this.timeline?.clipDuration)))}
-- cgit v1.2.3-70-g09d2 From 017016a8de25709b11febb0252b57824339e9151 Mon Sep 17 00:00:00 2001 From: mehekj Date: Sat, 5 Feb 2022 12:59:40 -0500 Subject: fixed merge conflicts --- src/client/views/MainView.tsx | 12 +++--- .../collections/CollectionStackedTimeline.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 48 ---------------------- 3 files changed, 7 insertions(+), 55 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8de2a5045..9875b0fab 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -166,7 +166,7 @@ export class MainView extends React.Component { } library.add(fa.faEdit, fa.faTrash, fa.faTrashAlt, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faCalendar, - fa.faSquare, far.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faMapMarker, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, + fa.faSquare, far.faSquare as any, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faMapMarker, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale, fa.faCopy, fa.faHandPointLeft, fa.faHandPointRight, fa.faCompass, fa.faSnowflake, fa.faMicrophone, fa.faKeyboard, fa.faQuestion, fa.faTasks, fa.faPalette, fa.faAngleLeft, fa.faAngleRight, fa.faBell, fa.faCamera, fa.faExpand, fa.faCaretDown, fa.faCaretLeft, fa.faCaretRight, fa.faCaretSquareDown, fa.faCaretSquareRight, fa.faArrowsAltH, fa.faPlus, fa.faMinus, fa.faTerminal, fa.faToggleOn, fa.faFile, fa.faLocationArrow, @@ -178,15 +178,15 @@ export class MainView extends React.Component { 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, fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faClipboard, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, - fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, - fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, far.faCircle, - fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp, - fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer, fa.faHashtag, fa.faAlignJustify, fa.faCheckSquare, fa.faListUl, + fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper as any, + fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, far.faCircle as any, + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer as any, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp, + fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer as any, fa.faHashtag, fa.faAlignJustify, fa.faCheckSquare, fa.faListUl, fa.faWindowMinimize, fa.faWindowRestore, fa.faTextWidth, fa.faTextHeight, fa.faClosedCaptioning, fa.faInfoCircle, fa.faTag, fa.faSyncAlt, fa.faPhotoVideo, fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical, fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll, fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines, - fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faSearchPlus, fa.faVolumeUp, fa.faVolumeMute, a.faMapMarkerAlt); + fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faSearchPlus, fa.faVolumeUp, fa.faVolumeMute, fa.faMapMarkerAlt); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 9a8b2940f..25f2e0b25 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -661,7 +661,7 @@ export class CollectionStackedTimeline extends CollectionSubView< height={height} toTimeline={this.toTimeline} layoutDoc={this.layoutDoc} - isDocumentActive={this.props.childDocumentsActive ? this.props.isDocumentActive : this.isContentActive} + // isDocumentActive={this.props.childDocumentsActive ? this.props.isDocumentActive : this.isContentActive} currentTimecode={this.currentTimecode} _timeline={this._timeline} stackedTimeline={this} diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 6dfb41671..d56363348 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -301,14 +301,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent this._audioPlayer = e; @computed get content() { const field = Cast(this.dataDoc[this.fieldKey], VideoField); @@ -336,11 +329,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent; } - @computed get youtubeVideoId() { - const field = Cast(this.dataDoc[this.props.fieldKey], VideoField); - return field && field.url.href.indexOf("youtube") !== -1 ? ((arr: string[]) => arr[arr.length - 1])(field.url.href.split("/")) : ""; - } - @action youtubeIframeLoaded = (e: any) => { if (!this._youtubeContentCreated) { this._forceCreateYouTubeIFrame = !this._forceCreateYouTubeIFrame; @@ -544,42 +532,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent [this.panelWidth() / 2 * (1 - this.heightPercent / 100) / (this.heightPercent / 100), 0]; timelineDocFilter = () => [`_timelineLabel:true,${Utils.noRecursionHack}:x`]; - @computed get content() { - const field = Cast(this.dataDoc[this.fieldKey], VideoField); - const interactive = CurrentUserUtils.SelectedTool !== InkTool.None || !this.props.isSelected() ? "" : "-interactive"; - const style = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive; - return !field ?
Loading
: -
-
- - {!this.audiopath || this.audiopath === field.url.href ? (null) : - } -
-
; - } - @computed get youtubeContent() { - this._youtubeIframeId = VideoBox._youtubeIframeCounter++; - this._youtubeContentCreated = this._forceCreateYouTubeIFrame ? true : true; - const style = "videoBox-content-YouTube" + (this._fullScreen ? "-fullScreen" : ""); - const start = untracked(() => Math.round((this.layoutDoc._currentTimecode || 0))); - return