diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 16 |
2 files changed, 11 insertions, 14 deletions
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))); } }; |