Video Slicer : fix preview display mismatch

video-slicer-reencoder
Moe 2022-10-02 20:57:46 -07:00
parent f1fb5cc9e3
commit 7cdfbb2af1
3 changed files with 6 additions and 9 deletions

View File

@ -8196,7 +8196,7 @@ module.exports = function(s,config,lang){
"divContent": `
<div id="studio-time-ticks"></div>
<div id="studio-seek-tick"></div>
<div id="studio-slice-selection"></div>
<div id="studio-slice-selection" style="width: 80%;left: 10%;"></div>
`,
},
]

View File

@ -13,8 +13,6 @@
background: rgb(216 230 249 / 70%);
border-radius: 5px;
position: absolute;
width: 80%;
left: 10%;
cursor: e-resize;
}
#studio-time-ticks {

View File

@ -62,7 +62,7 @@ $(document).ready(function(){
return `${roundedValue}`.length === 1 ? `0${roundedValue}` : roundedValue
}
function getTimeInfo(timePx){
var timeDifference = loadedVideoForSlicer.amountOfSecondsBetween
var timeDifference = loadedVideoElement.duration
var timePercent = timePx / stripWidth * 100
var timeSeconds = (timeDifference * (timePercent / 100))
// var timeMinutes = parseInt(timeSeconds / 60)
@ -77,7 +77,7 @@ $(document).ready(function(){
}
}
function getSliceSelection(){
var amountOfSecondsBetween = loadedVideoForSlicer.amountOfSecondsBetween
var amountOfSecondsBetween = loadedVideoElement.duration
//
var startTimePx = timelineStripSliceSelection.position().left
var startTimeInfo = getTimeInfo(startTimePx)
@ -102,7 +102,7 @@ $(document).ready(function(){
})
}
function drawTimeTicks(video){
var amountOfSecondsBetween = loadedVideoForSlicer.amountOfSecondsBetween
var amountOfSecondsBetween = loadedVideoElement.duration
var tickDivisor = amountOfSecondsBetween > 60 * 60 ? 500 : amountOfSecondsBetween > 60 ? 100 : amountOfSecondsBetween > 30 ? 20 : 2
var numberOfTicks = amountOfSecondsBetween / tickDivisor
var tickStripWidth = timelineStripTimeTicksContainer.width()
@ -124,7 +124,7 @@ $(document).ready(function(){
loadedVideoElement = videoElement[0]
}
function updateSeekTickPosition(){
const percentMoved = loadedVideoElement.currentTime / loadedVideoForSlicer.amountOfSecondsBetween * 100
const percentMoved = loadedVideoElement.currentTime / loadedVideoElement.duration * 100
seekTick.css('left',`${percentMoved}%`)
}
function setSeekRestraintOnVideo(){
@ -189,9 +189,8 @@ $(document).ready(function(){
loadedVideoForSlicer = Object.assign({},video)
var startTime = new Date(loadedVideoForSlicer.time)
var endTime = new Date(loadedVideoForSlicer.end)
loadedVideoForSlicer.amountOfSecondsBetween = (endTime - startTime) / 1000
drawTimeTicks(video)
createVideoElement(video)
drawTimeTicks(video)
completedVideosList.empty()
setSeekRestraintOnVideo()
}