From b830a5dc8df82886a9304ebe02fe93cdf1c0b521 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 28 Jul 2022 14:10:32 -0400
Subject: fixed video thumbnail generation to have a lock that prevents
 multiple attempts to create the thumbnails at the same time.  fixed
 ImageUpload to catch resize errors and not crash the server.

---
 .../views/collections/CollectionStackedTimeline.tsx      |  9 ++++-----
 src/client/views/nodes/VideoBox.tsx                      | 16 +++++++---------
 2 files changed, 11 insertions(+), 14 deletions(-)

(limited to 'src/client')

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 714d8421a..52126884a 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -2,7 +2,7 @@ import React = require('react');
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { Doc, DocListCast, StrListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
@@ -289,10 +289,9 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
             this._hoverTime = this.toTimeline(clientX - rect.x, rect.width);
             if (this.dataDoc.thumbnails) {
                 const nearest = Math.floor((this._hoverTime / this.props.rawDuration) * VideoBox.numThumbnails);
-                const thumbnails = Cast(this.dataDoc.thumbnails, listSpec('string'), []);
-                const imgField = thumbnails && thumbnails.length > 0 ? new ImageField(thumbnails[nearest]) : new ImageField('');
-                const src = imgField && imgField.url.href ? imgField.url.href.replace('.png', '_s.png') : '';
-                this._thumbnail = src ? src : undefined;
+                const thumbnails = StrListCast(this.dataDoc.thumbnails);
+                const imgField = thumbnails?.length > 0 ? new ImageField(thumbnails[nearest]) : undefined;
+                this._thumbnail = imgField?.url?.href ? imgField.url.href.replace('.png', '_s.png') : undefined;
             }
         }
     };
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 681f7c5b2..4af4d2020 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -418,31 +418,29 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // extracts video thumbnails and saves them as field of doc
     getVideoThumbnails = () => {
-        const video = document.createElement('video');
+        if (this.dataDoc.thumbnails !== undefined) return;
+        this.dataDoc.thumbnails = new List<string>();
         const thumbnailPromises: Promise<any>[] = [];
+        const video = document.createElement('video');
 
-        video.onloadedmetadata = () => {
-            video.currentTime = 0;
-        };
+        video.onloadedmetadata = () => (video.currentTime = 0);
 
         video.onseeked = () => {
             const canvas = document.createElement('canvas');
             canvas.height = video.videoHeight;
             canvas.width = video.videoWidth;
             const ctx = canvas.getContext('2d');
-            ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
+            ctx?.drawImage(video, 0, 0, canvas.width, canvas.height, 0, 0, 25, 25);
             const imgUrl = canvas.toDataURL();
             const retitled = StrCast(this.rootDoc.title).replace(/[ -\.:]/g, '');
             const encodedFilename = encodeURIComponent('thumbnail' + retitled + '_' + video.currentTime.toString().replace(/\./, '_'));
             const filename = basename(encodedFilename);
-            thumbnailPromises.push(VideoBox.convertDataUri(imgUrl, filename));
+            thumbnailPromises?.push(VideoBox.convertDataUri(imgUrl, filename, true));
             const newTime = video.currentTime + video.duration / (VideoBox.numThumbnails - 1);
             if (newTime < video.duration) {
                 video.currentTime = newTime;
             } else {
-                Promise.all(thumbnailPromises).then(thumbnails => {
-                    this.dataDoc.thumbnails = new List<string>(thumbnails);
-                });
+                Promise.all(thumbnailPromises).then(thumbnails => (this.dataDoc.thumbnails = new List<string>(thumbnails)));
             }
         };
 
-- 
cgit v1.2.3-70-g09d2