|
| 1 | +/* global Feature, Scenario */ |
| 2 | + |
| 3 | +const assert = require('assert'); |
| 4 | + |
| 5 | +Feature('Video timeline seek indicator').tag('@regress'); |
| 6 | + |
| 7 | + |
| 8 | +Scenario('Seek view should be in sync with indicator position', async ({ I, LabelStudio, AtVideoView }) => { |
| 9 | + I.amOnPage('/'); |
| 10 | + LabelStudio.init({ |
| 11 | + config: ` |
| 12 | +<View> |
| 13 | + <Video name="video" value="$video" /> |
| 14 | + <VideoRectangle name="box" toName="video" /> |
| 15 | +
|
| 16 | + <Labels name="videoLabels" toName="video"> |
| 17 | + <Label value="Car" background="#944BFF"/> |
| 18 | + <Label value="Airplane" background="#98C84E"/> |
| 19 | + <Label value="Possum" background="#FA8C16"/> |
| 20 | + </Labels> |
| 21 | +</View>`, |
| 22 | + data: { video: '/files/opossum_intro.webm' }, |
| 23 | + }); |
| 24 | + |
| 25 | + I.say('waitForObjectsReady'); |
| 26 | + LabelStudio.waitForObjectsReady(); |
| 27 | + |
| 28 | + const trackBbox = await AtVideoView.grabTrackBoundingRect(); |
| 29 | + let positionBbox = await AtVideoView.grabPositionBoundingRect(); |
| 30 | + let indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 31 | + |
| 32 | + assert.notDeepEqual({ x: 0, y: 0, width: 0, height: 0 }, trackBbox); |
| 33 | + assert.notDeepEqual({ x: 0, y: 0, width: 0, height: 0 }, positionBbox); |
| 34 | + assert.notDeepEqual({ x: 0, y: 0, width: 0, height: 0 }, indicatorBbox); |
| 35 | + |
| 36 | + const trackZeroX = trackBbox.x; |
| 37 | + const halfway = (trackBbox.width - trackZeroX) / 2; |
| 38 | + |
| 39 | + { |
| 40 | + I.say('Drag the video position indicator to the right to the middle'); |
| 41 | + |
| 42 | + AtVideoView.drag(positionBbox, halfway, 0); |
| 43 | + positionBbox = await AtVideoView.grabPositionBoundingRect(); |
| 44 | + indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 45 | + |
| 46 | + I.say('Check the video position indicator is close to 50%'); |
| 47 | + const delta = Math.round((positionBbox.x / (trackBbox.x + trackBbox.width)) * 10) / 10; |
| 48 | + |
| 49 | + assert.equal(0.5, delta); |
| 50 | + |
| 51 | + I.say('Check the video position indicator is within the seek indicator'); |
| 52 | + assert.ok(indicatorBbox.x <= positionBbox.x, 'Video position indicator not within the seek indicator when dragged near the midway point'); |
| 53 | + assert.ok(indicatorBbox.x + indicatorBbox.width >= positionBbox.x + positionBbox.width, 'Video position indicator not within the seek indicator when dragged near the midway point'); |
| 54 | + } |
| 55 | + |
| 56 | + { |
| 57 | + I.say('Drag the video position indicator to the end'); |
| 58 | + AtVideoView.drag(positionBbox, trackBbox.width, 0); |
| 59 | + positionBbox = await AtVideoView.grabPositionBoundingRect(); |
| 60 | + indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 61 | + |
| 62 | + I.say('Check the video position indicator is close to 100%'); |
| 63 | + const delta = Math.round((positionBbox.x / (trackBbox.x + trackBbox.width)) * 10) / 10; |
| 64 | + |
| 65 | + assert.equal(1, delta); |
| 66 | + |
| 67 | + I.say('Check the video position indicator is within the seek indicator'); |
| 68 | + assert.ok(indicatorBbox.x <= positionBbox.x, 'Video position indicator not within the seek indicator when dragged to the end'); |
| 69 | + assert.ok(indicatorBbox.x + indicatorBbox.width >= positionBbox.x + positionBbox.width, 'Video position indicator not within the seek indicator when dragged to the end'); |
| 70 | + } |
| 71 | + |
| 72 | + { |
| 73 | + I.say('Drag the video position indicator to the left to the middle'); |
| 74 | + AtVideoView.drag(positionBbox, halfway, 0); |
| 75 | + positionBbox = await AtVideoView.grabPositionBoundingRect(); |
| 76 | + indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 77 | + |
| 78 | + I.say('Check the video position indicator is close to 50%'); |
| 79 | + const delta = Math.round((positionBbox.x / (trackBbox.x + trackBbox.width)) * 10) / 10; |
| 80 | + |
| 81 | + assert.equal(0.5, delta); |
| 82 | + |
| 83 | + I.say('Check the video position indicator is within the seek indicator'); |
| 84 | + assert.ok(indicatorBbox.x <= positionBbox.x, 'Video position indicator not within the seek indicator when dragged back to the midway point'); |
| 85 | + assert.ok(indicatorBbox.x + indicatorBbox.width >= positionBbox.x + positionBbox.width, 'Video position indicator not within the seek indicator when dragged back to the midway point'); |
| 86 | + } |
| 87 | + |
| 88 | + { |
| 89 | + I.say('Drag the video position indicator to the start'); |
| 90 | + AtVideoView.drag(positionBbox, 0, 0); |
| 91 | + positionBbox = await AtVideoView.grabPositionBoundingRect(); |
| 92 | + indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 93 | + |
| 94 | + I.say('Check the video position indicator is close to 0%'); |
| 95 | + const delta = Math.round((positionBbox.x / (trackBbox.x + trackBbox.width)) * 10) / 10; |
| 96 | + |
| 97 | + assert.equal(0, delta); |
| 98 | + |
| 99 | + I.say('Check the video position indicator is within the seek indicator'); |
| 100 | + assert.ok(indicatorBbox.x <= positionBbox.x, 'Video position indicator not within the seek indicator when dragged back to the starting point'); |
| 101 | + assert.ok(indicatorBbox.x + indicatorBbox.width >= positionBbox.x + positionBbox.width,'Video position indicator not within the seek indicator when dragged back to the starting point'); |
| 102 | + } |
| 103 | + |
| 104 | + { |
| 105 | + I.say('Click on the seek step forward button until the video position indicator is at the end'); |
| 106 | + let indicatorPosX = indicatorBbox.x; |
| 107 | + |
| 108 | + I.say('Move the video position indicator to the end of the seek indicator'); |
| 109 | + const endOfSeeker = indicatorBbox.width - 2; // The indicator width is set wider by 1.5, to account for the pixel sizing of the position indicator width and placement rounding, so subtract this |
| 110 | + |
| 111 | + await AtVideoView.drag(positionBbox, endOfSeeker, 0); |
| 112 | + indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 113 | + |
| 114 | + I.say('Seeker should not have moved'); |
| 115 | + assert.equal(indicatorBbox.x, indicatorPosX, 'Seeker should not have moved from this one step movement'); |
| 116 | + indicatorPosX = indicatorBbox.x; |
| 117 | + |
| 118 | + I.say('Click on the seek step forward button'); |
| 119 | + await AtVideoView.clickSeekStepForward(2); |
| 120 | + indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 121 | + |
| 122 | + I.say('Seeker should now have moved to the right'); |
| 123 | + assert.ok(indicatorBbox.x > indicatorPosX, 'Seeker should have moved from this one step movement'); |
| 124 | + indicatorPosX = indicatorBbox.x; |
| 125 | + |
| 126 | + I.say('Click on the seek step backward button'); |
| 127 | + await AtVideoView.clickSeekStepBackward(1); |
| 128 | + indicatorBbox = await AtVideoView.grabIndicatorBoundingRect(); |
| 129 | + |
| 130 | + I.say('Seeker should now have moved to the left'); |
| 131 | + assert.ok(indicatorBbox.x < indicatorPosX, 'Seeker should have moved to the left from this one step movement'); |
| 132 | + } |
| 133 | +}); |
| 134 | + |
0 commit comments