refactor code, fix bugs, make first movement on screen the beginning of the presentation.

1 files changed, 75 insertions, 75 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index ed9bcf29b..34df03954 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -28,7 +28,7 @@ import { AnchorMenu } from "../pdf/AnchorMenu";
 import { StyleProp } from "../StyleProvider";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./VideoBox.scss";
-import { RecordingApi } from "../../util/RecordingApi";
+import { Presentation, RecordingApi } from "../../util/RecordingApi";
 import { List } from "../../../fields/List";
 import { RecordingBox } from "./RecordingBox";
 const path = require('path');
@@ -48,80 +48,80 @@ const path = require('path');
 
 @observer
 export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
-      public static LayoutString(fieldKey: string) { return FieldView.LayoutString(VideoBox, fieldKey); }
-      /**
-       * Uploads an image buffer to the server and stores with specified filename.  by default the image
-       * is stored at multiple resolutions each retrieved by using the filename appended with _o, _s, _m, _l (indicating original, small, medium, or large)
-       * @param imageUri the bytes of the image
-       * @param returnedFilename the base filename to store the image on the server
-       * @param nosuffix optionally suppress creating multiple resolution images
-       */
-      public static async convertDataUri(imageUri: string, returnedFilename: string, nosuffix = false, replaceRootFilename?: string) {
-            try {
-                  const posting = Utils.prepend("/uploadURI");
-                  const returnedUri = await rp.post(posting, {
-                        body: {
-                              uri: imageUri,
-                              name: returnedFilename,
-                              nosuffix,
-                              replaceRootFilename
-                        },
-                        json: true,
-                  });
-                  return returnedUri;
-
-            } catch (e) {
-                  console.log("VideoBox :" + e);
-            }
-      }
-
-      static _youtubeIframeCounter: number = 0;
-      static heightPercent = 80; // height of video relative to videoBox when timeline is open
-      private _disposers: { [name: string]: IReactionDisposer } = {};
-      private _youtubePlayer: YT.Player | undefined = undefined;
-      private _videoRef: HTMLVideoElement | null = null; // <video> ref
-      private _contentRef: HTMLDivElement | null = null; // ref to div that wraps video and controls for full screen
-      private _youtubeIframeId: number = -1;
-      private _youtubeContentCreated = false;
-      private _audioPlayer: HTMLAudioElement | null = null;
-      private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); // outermost div
-      private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
-      private _playRegionTimer: any = null; // timeout for playback
-      @observable _stackedTimeline: any; // CollectionStackedTimeline ref
-      @observable static _nativeControls: boolean; // default html controls
-      @observable _marqueeing: number[] | undefined; // coords for marquee selection
-      @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
-      @observable _screenCapture = false;
-      @observable _clicking = false; // used for transition between showing/hiding timeline
-      @observable _forceCreateYouTubeIFrame = false;
-      @observable _playTimer?: NodeJS.Timeout = undefined;
-      @observable _fullScreen = false;
-      @observable _playing = false;
-      @observable _finished: boolean = false; // has playback reached end of clip
-      @observable _volume: number = 1;
-      @observable _muted: boolean = false;
-
-      @computed get links() { return DocListCast(this.dataDoc.links); }
-      @computed get heightPercent() { return NumCast(this.layoutDoc._timelineHeightPercent, 100); } // current percent of video relative to VideoBox height
-      // @computed get rawDuration() { return NumCast(this.dataDoc[this.fieldKey + "-duration"]); }
-      @observable rawDuration: number = 0;
-
-
-      @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("/")) : "";
-      }
-
-
-      // returns the path of the audio file
-      @computed get audiopath() {
-            const field = Cast(this.props.Document[this.props.fieldKey + '-audio'], AudioField, null);
-            const vfield = Cast(this.dataDoc[this.fieldKey], VideoField, null);
-            return field?.url.href ?? vfield?.url.href ?? "";
-      }
-
-      // returns the presentation data if it exists, null otherwise
-      @computed get presentation() {
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(VideoBox, fieldKey); }
+    /**
+     * Uploads an image buffer to the server and stores with specified filename.  by default the image
+     * is stored at multiple resolutions each retrieved by using the filename appended with _o, _s, _m, _l (indicating original, small, medium, or large)
+     * @param imageUri the bytes of the image
+     * @param returnedFilename the base filename to store the image on the server
+     * @param nosuffix optionally suppress creating multiple resolution images
+     */
+    public static async convertDataUri(imageUri: string, returnedFilename: string, nosuffix = false, replaceRootFilename?: string) {
+        try {
+            const posting = Utils.prepend("/uploadURI");
+            const returnedUri = await rp.post(posting, {
+                body: {
+                    uri: imageUri,
+                    name: returnedFilename,
+                    nosuffix,
+                    replaceRootFilename
+                },
+                json: true,
+            });
+            return returnedUri;
+
+        } catch (e) {
+            console.log("VideoBox :" + e);
+        }
+    }
+
+    static _youtubeIframeCounter: number = 0;
+    static heightPercent = 80; // height of video relative to videoBox when timeline is open
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+    private _youtubePlayer: YT.Player | undefined = undefined;
+    private _videoRef: HTMLVideoElement | null = null; // <video> ref
+    private _contentRef: HTMLDivElement | null = null; // ref to div that wraps video and controls for full screen
+    private _youtubeIframeId: number = -1;
+    private _youtubeContentCreated = false;
+    private _audioPlayer: HTMLAudioElement | null = null;
+    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); // outermost div
+    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+    private _playRegionTimer: any = null; // timeout for playback
+    @observable _stackedTimeline: any; // CollectionStackedTimeline ref
+    @observable static _nativeControls: boolean; // default html controls
+    @observable _marqueeing: number[] | undefined; // coords for marquee selection
+    @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+    @observable _screenCapture = false;
+    @observable _clicking = false; // used for transition between showing/hiding timeline
+    @observable _forceCreateYouTubeIFrame = false;
+    @observable _playTimer?: NodeJS.Timeout = undefined;
+    @observable _fullScreen = false;
+    @observable _playing = false;
+    @observable _finished: boolean = false; // has playback reached end of clip
+    @observable _volume: number = 1;
+    @observable _muted: boolean = false;
+
+    @computed get links() { return DocListCast(this.dataDoc.links); }
+    @computed get heightPercent() { return NumCast(this.layoutDoc._timelineHeightPercent, 100); } // current percent of video relative to VideoBox height
+    // @computed get rawDuration() { return NumCast(this.dataDoc[this.fieldKey + "-duration"]); }
+    @observable rawDuration: number = 0;
+
+
+    @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("/")) : "";
+    }
+
+
+    // returns the path of the audio file
+    @computed get audiopath() {
+        const field = Cast(this.props.Document[this.props.fieldKey + '-audio'], AudioField, null);
+        const vfield = Cast(this.dataDoc[this.fieldKey], VideoField, null);
+        return field?.url.href ?? vfield?.url.href ?? "";
+    }
+
+    // returns the presentation data if it exists, null otherwise
+    @computed get presentation(): Presentation | null {
             const data = this.dataDoc[this.fieldKey + '-presentation'];
             return data ? JSON.parse(data) : null;
       }