aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-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/VideoBox.tsx65
3 files changed, 34 insertions, 37 deletions
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 2b6c272aa..8d519ff2b 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/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 9ee4d7942..1b9138cfd 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 = false;
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 12:51:00 +0000