aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/GlobalKeyHandler.ts11
-rw-r--r--src/client/views/collections/CollectionSubView.tsx4
-rw-r--r--src/client/views/collections/CollectionVideoView.tsx2
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx3
-rw-r--r--src/client/views/nodes/VideoBox.tsx65
5 files changed, 44 insertions, 41 deletions
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 280b13599..037eee55f 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -6,7 +6,7 @@ import { DragManager } from "../util/DragManager";
import { action } from "mobx";
const modifiers = ["control", "meta", "shift", "alt"];
-type KeyHandler = (keycode: string) => KeyControlInfo;
+type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo;
type KeyControlInfo = {
preventDefault: boolean,
stopPropagation: boolean
@@ -42,7 +42,7 @@ export default class KeyManager {
return;
}
- let control = handleConstrained(keyname);
+ let control = handleConstrained(keyname, e);
control.stopPropagation && e.stopPropagation();
control.preventDefault && e.preventDefault();
@@ -53,7 +53,7 @@ export default class KeyManager {
}
});
- private unmodified = action((keyname: string) => {
+ private unmodified = action((keyname: string, e: KeyboardEvent) => {
switch (keyname) {
case "escape":
if (MainView.Instance.isPointerDown) {
@@ -69,6 +69,11 @@ export default class KeyManager {
break;
case "delete":
case "backspace":
+ if (document.activeElement) {
+ if (document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA") {
+ return;
+ }
+ }
UndoManager.RunInBatch(() => {
SelectionManager.SelectedDocuments().map(docView => {
let doc = docView.props.Document;
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index b2c3fb7d0..71f1908f0 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -197,7 +197,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
.then(result => {
let type = result["content-type"];
if (type) {
- Docs.Get.DocumentFromType(type, str, { ...options, width: 300, nativeWidth: 300 })
+ Docs.Get.DocumentFromType(type, str, { ...options, width: 300, nativeWidth: type.indexOf("video") !== -1 ? 600 : 300 })
.then(doc => doc && this.props.addDocument(doc, false));
}
});
@@ -218,7 +218,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
body: formData
}).then(async (res: Response) => {
(await res.json()).map(action((file: any) => {
- let full = { ...options, nativeWidth: 300, width: 300, title: dropFileName };
+ let full = { ...options, nativeWidth: type.indexOf("video") !== -1 ? 600 : 300, width: 300, title: dropFileName };
let path = DocServer.prepend(file);
Docs.Get.DocumentFromType(type, path, full).then(doc => doc && this.props.addDocument(doc));
}));
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 39fe3edd1..f731c4cef 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -43,7 +43,7 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
@action
onPlayDown = () => {
- if (this._videoBox && this._videoBox.player) {
+ if (this._videoBox) {
if (this._videoBox.Playing) {
this._videoBox.Pause();
} else {
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index bc36074d2..82c2cef26 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -350,7 +350,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
}
}
onPointerWheel = (e: React.WheelEvent): void => {
- if (this.props.isSelected()) {
+ // if a text note is not selected and scrollable, this prevents us from being able to scroll and zoom out at the same time
+ if (this.props.isSelected() || e.currentTarget.scrollHeight > e.currentTarget.clientHeight) {
e.stopPropagation();
}
}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fa1e4d273..1254fb4b1 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -47,16 +47,31 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
@action public Play() {
this.Playing = true;
- if (this.player) this.player.play();
- if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 500);
+ if (this.player) {
+ this.player.play();
+ if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 500);
+ } else if (this._youtubePlayer) {
+ this._youtubePlayer.playVideo();
+ if (!this._playTimer) this._playTimer = setInterval(this.updateYoutubeTimecode, 1000);
+ }
}
@action public Pause() {
this.Playing = false;
- if (this.player) this.player.pause();
- if (this._playTimer) {
- clearInterval(this._playTimer);
- this._playTimer = undefined;
+ if (this.player) {
+ this.player.pause();
+ if (this._playTimer) {
+ clearInterval(this._playTimer);
+ this._playTimer = undefined;
+ }
+ } else if (this._youtubePlayer) {
+ // let interactive = InkingControl.Instance.selectedTool || !this.props.isSelected() ? "" : "-interactive";
+ // this._youtubePlayer.getIframe().style.pointerEvents = interactive ? "all" : "none";
+ this._youtubePlayer.pauseVideo();
+ if (this._playTimer) {
+ clearInterval(this._playTimer);
+ this._playTimer = undefined;
+ }
}
}
@@ -91,39 +106,24 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
height: `${NumCast(this.props.Document.height)}`,
width: `${NumCast(this.props.Document.width)}`,
videoId: videoid.toString(),
- playerVars: { 'controls': 0 },
+ playerVars: { 'controls': VideoBox._showControls ? 1 : 0 },
events: {
- //'onReady': this.onPlayerReady,
+ 'onStateChange': this.onPlayerStateChange,
}
});
// let iframe = $(document.getElementById(`${videoid}-player`)!);
// iframe.on("load", function () {
// iframe.contents().find("head")
// .append($("<style type='text/css'> .ytp-pause-overlay, .ytp-scroll-min { opacity : 0 !important; } </style>"));
- // });
- reaction(() => this.props.isSelected(), (sel) => {
- if (sel) {
- this._youtubePlayer.playVideo();
- if (!this._playTimer) this._playTimer = setInterval(this.updateYoutubeTimecode, 1000);
- } else {
- let iframe = $(document.getElementById(`${videoid}-player`)!);
- // .ytp-pause-overlay, .ytp-scroll-min { opacity : 0 !important; }
- // $('iframe').load( function() {
- // $('iframe').contents().find("head")
- // .append($("<style type='text/css'> .my-class{display:none;} </style>"));
- // });
- //this._youtubePlayer.cueVideoById(videoid, this._youtubePlayer.getCurrentTime());
- this._youtubePlayer.pauseVideo();
- if (this._playTimer) {
- clearInterval(this._playTimer);
- this._playTimer = undefined;
- }
- }
- });
+ // })
}
+ }
-
+ @action
+ onPlayerStateChange = (event: any) => {
+ this.Playing = event.data == YT.PlayerState.PLAYING;
}
+
componentWillUnmount() {
this.Pause();
if (this._reactionDisposer) this._reactionDisposer();
@@ -141,10 +141,6 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
}
}
-
- onPointerDown = (e: React.PointerEvent) => {
- }
-
@observable static _showControls: boolean;
specificContextMenu = (e: React.MouseEvent): void => {
@@ -162,10 +158,11 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : interactive);
let videoid = field && field.url.href.indexOf("youtube") !== -1 ? ((arr: string[]) => arr[arr.length - 1])(field.url.href.split("/")) : "";
+ if (this._youtubePlayer) this._youtubePlayer.getIframe().style.pointerEvents = interactive ? "all" : "none";
return !field ? <div>Loading</div> :
videoid ?
<div id={`${videoid}-player`} className={`${style}`} style={{ height: "100%" }} /> :
- <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} controls={VideoBox._showControls}>
+ <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onContextMenu={this.specificContextMenu} controls={VideoBox._showControls}>
<source src={field.url.href} type="video/mp4" />
Not supported.
</video>;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 21:36:42 +0000