Add Preview for Video Slicer (Studio)+

Add Seekbar

definitions/base.js

@@ -8205,6 +8205,7 @@ module.exports = function(s,config,lang){
                      "fieldType": "div",
                      "divContent": `
                          <div id="studio-time-ticks"></div>
+                         <div id="studio-seek-tick"></div>
                          <div id="studio-slice-selection"></div>
                      `,
                   },

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%;

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)
     }