diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocComponent.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 18 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 23 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 2 |
5 files changed, 40 insertions, 11 deletions
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index b6b717be0..ff149a9ac 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -36,7 +36,7 @@ export function DocStaticComponent<P extends DocStaticProps, T>(schemaCtor: (doc get Document(): T { return schemaCtor(this.props.Document); } - active = () => (this.props.Document.forceActive || this.props.isSelected() || this.props.renderDepth === 0);// && !InkingControl.Instance.selectedTool; // bcz: inking state shouldn't affect static tools + active = () => !this.props.Document.isBackground && (this.props.Document.forceActive || this.props.isSelected() || this.props.renderDepth === 0);// && !InkingControl.Instance.selectedTool; // bcz: inking state shouldn't affect static tools } return Component; } @@ -85,7 +85,8 @@ export function DocAnnotatableComponent<P extends DocAnnotatableProps, T>(schema return Doc.AddDocToList(this.extensionDoc, this.props.fieldExt, doc); } whenActiveChanged = (isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive); - active = () => (InkingControl.Instance.selectedTool === InkTool.None) && (BoolCast(this.props.Document.forceActive) || this.props.isSelected() || this._isChildActive || this.props.renderDepth === 0); + active = () => ((InkingControl.Instance.selectedTool === InkTool.None && !this.props.Document.isBackground) && + (this.props.Document.forceActive || this.props.isSelected() || this._isChildActive || this.props.renderDepth === 0) ? true : false) } return Component; }
\ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 972966204..04d98e10d 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,6 +1,16 @@ -.audiobox-cont{ - top:0; - max-height: 32px; - position: absolute; +.audiobox-container { width: 100%; + height: 100%; + position: inherit; + display:inline-block; + .audiobox-control, .audiobox-control-interactive { + top:0; + max-height: 32px; + position: absolute; + width: 100%; + pointer-events: none; + } + .audiobox-control-interactive { + pointer-events: all; + } }
\ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index be6ae630f..689d44a2f 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -4,22 +4,37 @@ import { observer } from "mobx-react"; import "./AudioBox.scss"; import { Cast } from "../../../new_fields/Types"; import { AudioField } from "../../../new_fields/URLField"; +import { DocStaticComponent } from "../DocComponent"; +import { makeInterface } from "../../../new_fields/Schema"; +import { documentSchema } from "./DocumentView"; +import { InkingControl } from "../InkingControl"; +type AudioDocument = makeInterface<[typeof documentSchema]>; +const AudioDocument = makeInterface(documentSchema); const defaultField: AudioField = new AudioField(new URL("http://techslides.com/demos/samples/sample.mp3")); + @observer -export class AudioBox extends React.Component<FieldViewProps> { +export class AudioBox extends DocStaticComponent<FieldViewProps, AudioDocument>(AudioDocument) { public static LayoutString() { return FieldView.LayoutString(AudioBox); } + _ref = React.createRef<HTMLAudioElement>(); + + componentDidMount() { + if (this._ref.current) this._ref.current.currentTime = 1; + } render() { let field = Cast(this.props.Document[this.props.fieldKey], AudioField, defaultField); let path = field.url.href; + let interactive = this.active() ? "-interactive" : ""; return ( - <audio controls className="audiobox-cont" style={{ pointerEvents: "all" }}> - <source src={path} type="audio/mpeg" /> - Not supported. + <div className="audiobox-container"> + <audio controls ref={this._ref} className={`audiobox-control${interactive}`}> + <source src={path} type="audio/mpeg" /> + Not supported. </audio> + </div> ); } }
\ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 8bf698391..26e2c0fa2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -311,6 +311,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu case DocumentType.VID: fieldTemplate = Docs.Create.VideoDocument("http://www.cs.brown.edu", options); break; + case DocumentType.AUDIO: + fieldTemplate = Docs.Create.AudioDocument("http://www.cs.brown.edu", options); + break; default: fieldTemplate = Docs.Create.ImageDocument("http://www.cs.brown.edu", options); } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 5bca8b7cf..2fc4c04e6 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -401,7 +401,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum if (field instanceof ImageField) paths = [this.choosePath(field.url)]; paths.push(...altpaths); // } - let interactive = InkingControl.Instance.selectedTool || this.props.Document.isBackground ? "" : "-interactive"; + let interactive = this.active() ? "-interactive" : "";// InkingControl.Instance.selectedTool || this.props.Document.isBackground ? "" : "-interactive"; let rotation = NumCast(this.dataDoc.rotation, 0); let aspect = (rotation % 180) ? this.dataDoc[HeightSym]() / this.dataDoc[WidthSym]() : 1; let shift = (rotation % 180) ? (nativeHeight - nativeWidth / aspect) / 2 : 0; |