From ac38d49d85a488473cef256c9561295f8a5ab70e Mon Sep 17 00:00:00 2001 From: Nicolas Pennec Date: Fri, 13 Oct 2023 12:01:01 +0200 Subject: [PATCH 1/3] [edit] fix missing tile on video progress --- src/components/pages/Edit.vue | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/pages/Edit.vue b/src/components/pages/Edit.vue index 5633e8fbbe..b9750d7ecc 100644 --- a/src/components/pages/Edit.vue +++ b/src/components/pages/Edit.vue @@ -72,9 +72,10 @@ :current-preview-index="currentPreviewIndex" :muted="isMuted" @max-duration-update="onMaxDurationUpdate" + @frame-update="onFrameUpdate" @metadata-loaded="onMetadataLoaded" @repeat="onVideoRepeated" - @frame-update="onFrameUpdate" + @video-loaded="onVideoLoaded" v-show="isCurrentPreviewMovie && !isLoading" /> @@ -173,9 +174,11 @@ class="video-progress pull-bottom" :annotations="annotations" :frame-duration="frameDuration" + :movie-dimensions="movieDimensions" :nb-frames="nbFrames" :handle-in="-1" :handle-out="-1" + :preview-id="currentPreview ? currentPreview.id : ''" @start-scrub="onScrubStart" @end-scrub="onScrubEnd" @progress-changed="onProgressChanged" @@ -655,6 +658,7 @@ export default { currentSection: 'infos', isLoading: true, isError: false, + movieDimensions: { width: 0, height: 0 }, previewRoomRef: 'edits-preview-room', previewFileMap: new Map(), tempMode: false, @@ -886,6 +890,13 @@ export default { }) }, + onVideoLoaded() { + this.movieDimensions = { + width: this.currentPreview.width, + height: this.currentPreview.height + } + }, + scrollToEntity() { // This method in unused here, required by PlaylistPlayer that shares // playerMixin. From d44c3cb67f2cf1ff4494edf70c19b165c0db9b42 Mon Sep 17 00:00:00 2001 From: Nicolas Pennec Date: Fri, 13 Oct 2023 12:04:37 +0200 Subject: [PATCH 2/3] [player] refactor tile style to reduce compute --- src/components/previews/VideoProgress.vue | 83 ++++++++++++----------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/src/components/previews/VideoProgress.vue b/src/components/previews/VideoProgress.vue index a39743cda1..67b33e4f53 100644 --- a/src/components/previews/VideoProgress.vue +++ b/src/components/previews/VideoProgress.vue @@ -80,13 +80,12 @@ - - {{ hoverFrame }} - + {{ hoverFrame }} @@ -205,14 +204,41 @@ export default { return this.width / this.nbFrames }, + frameNumberStyle() { + const frameHeight = 100 + const height = frameHeight + 30 + const frameWidth = Math.ceil(frameHeight * this.videoRatio) + const width = frameWidth + 10 + const left = Math.min( + Math.max(this.frameNumberLeftPosition - frameWidth / 2, 0), + this.width - frameWidth - 10 + ) + return { + height: `${height}px`, + width: `${width}px`, + top: this.isFullScreen ? `-${height}px` : '30px', + left: `${left}px` + } + }, + progress() { return this.$refs.progress }, + tilePath() { + return `/api/movies/tiles/preview-files/${this.previewId}.png` + }, + videoDuration() { return this.nbFrames * this.frameDuration }, + videoRatio() { + return this.movieDimensions.width + ? this.movieDimensions.width / this.movieDimensions.height + : 1 + }, + handleInWidth() { return Math.max(this.frameSize * this.handleIn, 0) + 'px' } @@ -330,48 +356,22 @@ export default { /** * Returns the background style for a given frame, calculating the * background position depending on the frame number. The tile background is - * 5 frames wide. + * 8 frames wide. * @param {number} frame */ getFrameBackgroundStyle(frame) { if (!frame) return {} const frameX = frame % 8 const frameY = Math.floor(frame / 8) - const ratio = this.movieDimensions.width / this.movieDimensions.height const frameHeight = 100 - const frameWidth = Math.ceil(frameHeight * ratio) - const style = { - background: `url(/api/movies/tiles/preview-files/${this.previewId}.png)`, - 'background-repeat': 'no-repeat', - 'background-size': `${8 * frameWidth}px auto`, + const frameWidth = Math.ceil(frameHeight * this.videoRatio) + return { + background: `url(${this.tilePath})`, 'background-position': `-${frameX * frameWidth}px -${ frameY * frameHeight }px`, - height: `${frameHeight}px`, - width: `${frameWidth}px`, - display: 'inline-block' - } - return style - }, - - getFrameNumberStyle(frame) { - const frameHeight = 100 - const height = frameHeight + 30 - const ratio = this.movieDimensions.width - ? this.movieDimensions.width / this.movieDimensions.height - : 1 - const frameWidth = Math.ceil(frameHeight * ratio) - const width = frameWidth + 10 - const left = Math.min( - Math.max(this.frameNumberLeftPosition - frameWidth / 2, 0), - this.width - frameWidth - 10 - ) - - return { - height: height + 'px', - width: width + 'px', - top: this.isFullScreen ? `-${height}px` : '30px', - left: left + 'px' + // height: `${frameHeight}px`, + width: `${frameWidth}px` } } }, @@ -386,10 +386,9 @@ export default { previewId() { if (this.movieDimensions.width && this.previewId) { - const path = `/api/movies/tiles/preview-files/${this.previewId}.png` - const img = new Image() this.isTileLoading = true - img.src = path + const img = new Image() + img.src = this.tilePath img.onload = () => { this.isTileLoading = false } @@ -463,8 +462,10 @@ progress { width: 110px; z-index: 800; - img { - width: 100px; + .frame-tile { + display: inline-block; + background-repeat: no-repeat; + height: 100px; } } From ec829184cd42e446b93243f292ec5e9711eab392 Mon Sep 17 00:00:00 2001 From: Nicolas Pennec Date: Fri, 13 Oct 2023 12:06:29 +0200 Subject: [PATCH 3/3] [player] improve tile preloading It was not preloading on first init of previewId --- src/components/previews/VideoProgress.vue | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/previews/VideoProgress.vue b/src/components/previews/VideoProgress.vue index 67b33e4f53..8a1817a293 100644 --- a/src/components/previews/VideoProgress.vue +++ b/src/components/previews/VideoProgress.vue @@ -384,13 +384,16 @@ export default { this.updateProgressBar(0) }, - previewId() { - if (this.movieDimensions.width && this.previewId) { - this.isTileLoading = true - const img = new Image() - img.src = this.tilePath - img.onload = () => { - this.isTileLoading = false + previewId: { + immediate: true, + handler() { + if (this.previewId) { + this.isTileLoading = true + const img = new Image() + img.src = this.tilePath + img.onload = () => { + this.isTileLoading = false + } } } }