aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/VideoBox.tsx
diff options
context:
space:
mode:
authorSam Wilkins <samwilkins333@gmail.com>2019-12-03 01:46:36 -0500
committerSam Wilkins <samwilkins333@gmail.com>2019-12-03 01:46:36 -0500
commitef94ad7df2a087141ddb8d347d3e3c484ff7609b (patch)
treea7c16be04ff4050da1ff03e02f59df6da4f5f7e2 /src/client/views/nodes/VideoBox.tsx
parent62c888ad25c5580441eaf947a1a0f1638939b868 (diff)
const linter rule and restored google docs push, fixed routing
Diffstat (limited to 'src/client/views/nodes/VideoBox.tsx')
-rw-r--r--src/client/views/nodes/VideoBox.tsx66
1 files changed, 33 insertions, 33 deletions
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 741dcada0..376d27380 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -22,7 +22,7 @@ import { InkingControl } from "../InkingControl";
import { FieldView, FieldViewProps } from './FieldView';
import "./VideoBox.scss";
import { documentSchema, positionSchema } from "../../../new_fields/documentSchemas";
-var path = require('path');
+const path = require('path');
export const timeSchema = createSchema({
currentTimecode: "number", // the current time of a video or other linear, time-based document. Note, should really get set on an extension field, but that's more complicated when it needs to be set since the extension doc needs to be found first
@@ -54,9 +54,9 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
videoLoad = () => {
- let aspect = this.player!.videoWidth / this.player!.videoHeight;
- var nativeWidth = (this.Document.nativeWidth || 0);
- var nativeHeight = (this.Document.nativeHeight || 0);
+ const aspect = this.player!.videoWidth / this.player!.videoHeight;
+ const nativeWidth = (this.Document.nativeWidth || 0);
+ const nativeHeight = (this.Document.nativeHeight || 0);
if (!nativeWidth || !nativeHeight) {
if (!this.Document.nativeWidth) this.Document.nativeWidth = this.player!.videoWidth;
this.Document.nativeHeight = (this.Document.nativeWidth || 0) / aspect;
@@ -101,12 +101,12 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
@action public Snapshot() {
- let width = this.Document.width || 0;
- let height = this.Document.height || 0;
- var canvas = document.createElement('canvas');
+ const width = this.Document.width || 0;
+ const height = this.Document.height || 0;
+ const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 640 * (this.Document.nativeHeight || 0) / (this.Document.nativeWidth || 1);
- var ctx = canvas.getContext('2d');//draw image to canvas. scale to target dimensions
+ const ctx = canvas.getContext('2d');//draw image to canvas. scale to target dimensions
if (ctx) {
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "blue";
@@ -115,20 +115,20 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
if (!this._videoRef) { // can't find a way to take snapshots of videos
- let b = Docs.Create.ButtonDocument({
+ const b = Docs.Create.ButtonDocument({
x: (this.Document.x || 0) + width, y: (this.Document.y || 0),
width: 150, height: 50, title: (this.Document.currentTimecode || 0).toString()
});
b.onClick = ScriptField.MakeScript(`this.currentTimecode = ${(this.Document.currentTimecode || 0)}`);
} else {
//convert to desired file format
- var dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
+ const dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
// if you want to preview the captured image,
- let filename = path.basename(encodeURIComponent("snapshot" + StrCast(this.Document.title).replace(/\..*$/, "") + "_" + (this.Document.currentTimecode || 0).toString().replace(/\./, "_")));
+ const filename = path.basename(encodeURIComponent("snapshot" + StrCast(this.Document.title).replace(/\..*$/, "") + "_" + (this.Document.currentTimecode || 0).toString().replace(/\./, "_")));
VideoBox.convertDataUri(dataUrl, filename).then(returnedFilename => {
if (returnedFilename) {
- let url = this.choosePath(Utils.prepend(returnedFilename));
- let imageSummary = Docs.Create.ImageDocument(url, {
+ const url = this.choosePath(Utils.prepend(returnedFilename));
+ const imageSummary = Docs.Create.ImageDocument(url, {
x: (this.Document.x || 0) + width, y: (this.Document.y || 0),
width: 150, height: height / width * 150, title: "--snapshot" + (this.Document.currentTimecode || 0) + " image-"
});
@@ -150,9 +150,9 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
if (this.props.setVideoBox) this.props.setVideoBox(this);
if (this.youtubeVideoId) {
- let youtubeaspect = 400 / 315;
- var nativeWidth = (this.Document.nativeWidth || 0);
- var nativeHeight = (this.Document.nativeHeight || 0);
+ const youtubeaspect = 400 / 315;
+ const nativeWidth = (this.Document.nativeWidth || 0);
+ const nativeHeight = (this.Document.nativeHeight || 0);
if (!nativeWidth || !nativeHeight) {
if (!this.Document.nativeWidth) this.Document.nativeWidth = 600;
this.Document.nativeHeight = (this.Document.nativeWidth || 0) / youtubeaspect;
@@ -181,7 +181,7 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
public static async convertDataUri(imageUri: string, returnedFilename: string) {
try {
- let posting = Utils.prepend("/uploadURI");
+ const posting = Utils.prepend("/uploadURI");
const returnedUri = await rp.post(posting, {
body: {
uri: imageUri,
@@ -196,10 +196,10 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
}
specificContextMenu = (e: React.MouseEvent): void => {
- let field = Cast(this.dataDoc[this.props.fieldKey], VideoField);
+ const field = Cast(this.dataDoc[this.props.fieldKey], VideoField);
if (field) {
- let url = field.url.href;
- let subitems: ContextMenuProps[] = [];
+ const url = field.url.href;
+ const subitems: ContextMenuProps[] = [];
subitems.push({ description: "Copy path", event: () => { Utils.CopyText(url); }, icon: "expand-arrows-alt" });
subitems.push({ description: "Toggle Show Controls", event: action(() => VideoBox._showControls = !VideoBox._showControls), icon: "expand-arrows-alt" });
subitems.push({ description: "Take Snapshot", event: () => this.Snapshot(), icon: "expand-arrows-alt" });
@@ -208,9 +208,9 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
@computed get content() {
- let field = Cast(this.dataDoc[this.props.fieldKey], VideoField);
- let interactive = InkingControl.Instance.selectedTool || !this.props.isSelected() ? "" : "-interactive";
- let style = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive;
+ const field = Cast(this.dataDoc[this.props.fieldKey], VideoField);
+ const interactive = InkingControl.Instance.selectedTool || !this.props.isSelected() ? "" : "-interactive";
+ const style = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive;
return !field ? <div>Loading</div> :
<video className={`${style}`} key="video" ref={this.setVideoRef} onCanPlay={this.videoLoad} controls={VideoBox._showControls}
onPlay={() => this.Play()} onSeeked={this.updateTimecode} onPause={() => this.Pause()} onClick={e => e.preventDefault()}>
@@ -220,7 +220,7 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
@computed get youtubeVideoId() {
- let field = Cast(this.dataDoc[this.props.fieldKey], VideoField);
+ 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("/")) : "";
}
@@ -231,9 +231,9 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
else this._youtubeContentCreated = false;
- let iframe = e.target;
+ const iframe = e.target;
let started = true;
- let onYoutubePlayerStateChange = (event: any) => runInAction(() => {
+ const onYoutubePlayerStateChange = (event: any) => runInAction(() => {
if (started && event.data === YT.PlayerState.PLAYING) {
started = false;
this._youtubePlayer && this._youtubePlayer.unMute();
@@ -243,12 +243,12 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
if (event.data === YT.PlayerState.PLAYING && !this._playing) this.Play(false);
if (event.data === YT.PlayerState.PAUSED && this._playing) this.Pause(false);
});
- let onYoutubePlayerReady = (event: any) => {
+ const onYoutubePlayerReady = (event: any) => {
this._reactionDisposer && this._reactionDisposer();
this._youtubeReactionDisposer && this._youtubeReactionDisposer();
this._reactionDisposer = reaction(() => this.Document.currentTimecode, () => !this._playing && this.Seek(this.Document.currentTimecode || 0));
this._youtubeReactionDisposer = reaction(() => [this.props.isSelected(), DocumentDecorations.Instance.Interacting, InkingControl.Instance.selectedTool], () => {
- let interactive = InkingControl.Instance.selectedTool === InkTool.None && this.props.isSelected(true) && !DocumentDecorations.Instance.Interacting;
+ const interactive = InkingControl.Instance.selectedTool === InkTool.None && this.props.isSelected(true) && !DocumentDecorations.Instance.Interacting;
iframe.style.pointerEvents = interactive ? "all" : "none";
}, { fireImmediately: true });
};
@@ -261,8 +261,8 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
}
private get uIButtons() {
- let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().Scale);
- let curTime = (this.Document.currentTimecode || 0);
+ const scaling = Math.min(1.8, this.props.ScreenToLocalTransform().Scale);
+ const curTime = (this.Document.currentTimecode || 0);
return ([<div className="videoBox-time" key="time" onPointerDown={this.onResetDown} >
<span>{"" + Math.round(curTime)}</span>
<span style={{ fontSize: 8 }}>{" " + Math.round((curTime - Math.trunc(curTime)) * 100)}</span>
@@ -318,8 +318,8 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
@computed get youtubeContent() {
this._youtubeIframeId = VideoBox._youtubeIframeCounter++;
this._youtubeContentCreated = this._forceCreateYouTubeIFrame ? true : true;
- let style = "videoBox-content-YouTube" + (this._fullScreen ? "-fullScreen" : "");
- let start = untracked(() => Math.round(this.Document.currentTimecode || 0));
+ const style = "videoBox-content-YouTube" + (this._fullScreen ? "-fullScreen" : "");
+ const start = untracked(() => Math.round(this.Document.currentTimecode || 0));
return <iframe key={this._youtubeIframeId} id={`${this.youtubeVideoId + this._youtubeIframeId}-player`}
onLoad={this.youtubeIframeLoaded} className={`${style}`} width={(this.Document.nativeWidth || 640)} height={(this.Document.nativeHeight || 390)}
src={`https://www.youtube.com/embed/${this.youtubeVideoId}?enablejsapi=1&rel=0&showinfo=1&autoplay=1&mute=1&start=${start}&modestbranding=1&controls=${VideoBox._showControls ? 1 : 0}`} />;
@@ -327,7 +327,7 @@ export class VideoBox extends DocAnnotatableComponent<FieldViewProps, VideoDocum
@action.bound
addDocumentWithTimestamp(doc: Doc): boolean {
- var curTime = (this.Document.currentTimecode || -1);
+ const curTime = (this.Document.currentTimecode || -1);
curTime !== -1 && (doc.displayTimecode = curTime);
return this.addDocument(doc);
}