diff --git a/definitions/base.js b/definitions/base.js index 32ab4574..288118fd 100644 --- a/definitions/base.js +++ b/definitions/base.js @@ -8205,6 +8205,7 @@ module.exports = function(s,config,lang){ "fieldType": "div", "divContent": `
+
`, }, diff --git a/web/assets/css/bs5.studio.css b/web/assets/css/bs5.studio.css index 6a0fb297..f4c17998 100644 --- a/web/assets/css/bs5.studio.css +++ b/web/assets/css/bs5.studio.css @@ -25,12 +25,22 @@ height: 100%; } -#studio-time-ticks .tick{ +#studio-time-ticks .tick { position: absolute; border-left:1px solid rgba(0,0,0,0.1); height: 100%; } -#studio-time-ticks .tick span{ +#studio-seek-tick { + position: absolute; + border-left: 2px solid #fffc00; + border-radius: 5px; + transition: none; + z-index: 10; + height: 80%; + top: 10%; + left: 10%; +} +#studio-time-ticks .tick span { left: -50%; position: relative; font-size: 80%; diff --git a/web/assets/js/bs5.studio.js b/web/assets/js/bs5.studio.js index 98887958..a6b7fce3 100644 --- a/web/assets/js/bs5.studio.js +++ b/web/assets/js/bs5.studio.js @@ -2,6 +2,7 @@ $(document).ready(function(){ var theEnclosure = $('#tab-studio') var viewingCanvas = $('#studioViewingCanvas') var timelineStrip = $('#studioTimelineStrip') + var seekTick = $('#studio-seek-tick') var timelineStripTimeTicksContainer = $('#studio-time-ticks') var timelineStripSliceSelection = $('#studio-slice-selection') var loadedVideoForSlicer = null @@ -84,9 +85,7 @@ $(document).ready(function(){ }) } function drawTimeTicks(video){ - var startTime = moment(video.time) - var endTime = moment(video.end) - var amountOfSecondsBetween = moment.duration(endTime.diff(startTime)).asSeconds(); + var amountOfSecondsBetween = loadedVideoForSlicer.amountOfSecondsBetween var numberOfTicks = amountOfSecondsBetween / 20 var tickStripWidth = timelineStripTimeTicksContainer.width() var tickSpacingWidth = tickStripWidth / numberOfTicks @@ -106,16 +105,22 @@ $(document).ready(function(){ var videoElement = theEnclosure.find('video') loadedVideoElement = videoElement[0] } + function updateSeekTickPosition(){ + const percentMoved = loadedVideoElement.currentTime / loadedVideoForSlicer.amountOfSecondsBetween * 100 + seekTick.css('left',`${percentMoved}%`) + } function setSeekRestraintOnVideo(){ var data = getSliceSelection() var startTime = data.startTimeSeconds var endTime = data.endTimeSeconds console.log(data) if(!userInvokedPlayState){ - loadedVideoElement.ontimeupdate = () => {} + loadedVideoElement.ontimeupdate = () => { + updateSeekTickPosition() + } }else{ loadedVideoElement.ontimeupdate = (event) => { - console.log(loadedVideoElement.currentTime,event) + updateSeekTickPosition() if(loadedVideoElement.currentTime <= startTime){ loadedVideoElement.currentTime = startTime }else if(loadedVideoElement.currentTime >= endTime){ @@ -162,6 +167,9 @@ $(document).ready(function(){ } function loadVideoIntoSlicer(video){ loadedVideoForSlicer = Object.assign({},video) + var startTime = moment(video.time) + var endTime = moment(video.end) + loadedVideoForSlicer.amountOfSecondsBetween = moment.duration(endTime.diff(startTime)).asSeconds(); drawTimeTicks(video) createVideoElement(video) }