From aea0d56ebfc19a655a1acd30e90c105958858fdf Mon Sep 17 00:00:00 2001 From: timbradbury Date: Fri, 20 May 2022 15:38:50 +0100 Subject: [PATCH 1/5] fix(PPDSC-2047): refactor formatTrackData --- .../audio-player-composable.test.tsx | 2 +- .../__tests__/utils.test.tsx | 16 +++++++++++- .../components/seek-bar/utils.ts | 26 +++++++++++-------- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/audio-player-composable/__tests__/audio-player-composable.test.tsx b/src/audio-player-composable/__tests__/audio-player-composable.test.tsx index 19e44a0da8..7f1cb2952b 100644 --- a/src/audio-player-composable/__tests__/audio-player-composable.test.tsx +++ b/src/audio-player-composable/__tests__/audio-player-composable.test.tsx @@ -595,7 +595,7 @@ describe('Audio Player Composable', () => { `${seekBarIndicator.base!.backgroundColor}`, // indicator `${seekBarBuffering.base!.backgroundColor}`, // buffered `${seekBarTrack.base!.backgroundColor}`, // track background - `${seekBarBuffering.base!.backgroundColor}`, // buffered + `${seekBarTrack.base!.backgroundColor}`, // track background `${seekBarTrack.base!.backgroundColor}`, // track background ], max: 6610, diff --git a/src/audio-player-composable/__tests__/utils.test.tsx b/src/audio-player-composable/__tests__/utils.test.tsx index c24f383c95..5490392bfe 100644 --- a/src/audio-player-composable/__tests__/utils.test.tsx +++ b/src/audio-player-composable/__tests__/utils.test.tsx @@ -60,6 +60,7 @@ describe('formatTrackData', () => { test('when multiple buffered sections exist', () => { // This can occur when a user moves ahead then back again, multiple disparate buffered sections can exist. // Example here is buffered sections exist between 0-125 and 216-228. The current play position is at 32. + // It has been diecided to only show the first buffer section similar to how youtube does it. expect( formatTrackData('track', 'indicator', 'buffer', [32], { length: 2, @@ -67,11 +68,24 @@ describe('formatTrackData', () => { end: (i: number) => [125, 228][i], }), ).toEqual({ - colors: ['indicator', 'buffer', 'track', 'buffer', 'track'], + colors: ['indicator', 'buffer', 'track', 'track', 'track'], values: [32, 125, 216, 228], }); }); + test('Ensure start is not first value in buffer array', () => { + expect( + formatTrackData('track', 'indicator', 'buffer', [50], { + length: 3, + start: (i: number) => [0, 100, 150][i], + end: (i: number) => [49, 149, 199][i], + }), + ).toEqual({ + colors: ['indicator', 'buffer', 'track', 'track', 'track'], + values: [50, 149, 150, 199], + }); + }); + test('when current time is bigger than buffered end position', () => { expect( formatTrackData('track', 'indicator', 'buffer', [130], { diff --git a/src/audio-player-composable/components/seek-bar/utils.ts b/src/audio-player-composable/components/seek-bar/utils.ts index 1cf5a0a86d..fc66e376b6 100644 --- a/src/audio-player-composable/components/seek-bar/utils.ts +++ b/src/audio-player-composable/components/seek-bar/utils.ts @@ -10,24 +10,28 @@ export const formatTrackData = ( } const time = timeArr[0]; - const bufferPositions = []; + let bufferPositions = []; + let bufferObjectArray = []; const {length} = buffered; for (let i = 0; i < length; i += 1) { - const startPosition = buffered.start(i); - if (startPosition > time) { - bufferPositions.push(startPosition); - } - - const endPosition = buffered.end(i); - if (endPosition > time) { - bufferPositions.push(endPosition); - } + bufferObjectArray.push({type: 'start', value: buffered.start(i)}); + bufferObjectArray.push({type: 'end', value: buffered.end(i)}); } + bufferObjectArray = bufferObjectArray.filter(val => val.value > time); + if (bufferObjectArray[0] && bufferObjectArray[0].type === 'start') { + bufferObjectArray.shift(); + } + + bufferPositions = bufferObjectArray.map(val => val.value); + const colors = [ indicatorColor, - ...bufferPositions.map((x, i) => (i % 2 ? trackColor : bufferColor)), + ...bufferPositions.map((x, i) => { + if (i === 0) return bufferColor; + return trackColor; + }), trackColor, ]; const values = [time, ...bufferPositions]; From 451ec63d39997dbf6253c77896778673c8e82a78 Mon Sep 17 00:00:00 2001 From: timbradbury Date: Mon, 23 May 2022 11:57:56 +0100 Subject: [PATCH 2/5] fix(PPDSC-2047): refactor to send closest buffer --- .../audio-player-composable.test.tsx | 6 +-- .../__tests__/utils.test.tsx | 20 ++++----- .../components/seek-bar/utils.ts | 45 +++++++++++++------ 3 files changed, 43 insertions(+), 28 deletions(-) diff --git a/src/audio-player-composable/__tests__/audio-player-composable.test.tsx b/src/audio-player-composable/__tests__/audio-player-composable.test.tsx index 7f1cb2952b..2adc1b29cb 100644 --- a/src/audio-player-composable/__tests__/audio-player-composable.test.tsx +++ b/src/audio-player-composable/__tests__/audio-player-composable.test.tsx @@ -593,14 +593,12 @@ describe('Audio Player Composable', () => { expect(mockGetTrackBackground).toHaveBeenCalledWith({ colors: [ `${seekBarIndicator.base!.backgroundColor}`, // indicator - `${seekBarBuffering.base!.backgroundColor}`, // buffered - `${seekBarTrack.base!.backgroundColor}`, // track background - `${seekBarTrack.base!.backgroundColor}`, // track background + `${seekBarBuffering.base!.backgroundColor}`, // buffered// track background `${seekBarTrack.base!.backgroundColor}`, // track background ], max: 6610, min: 0, - values: [10, 14, 20, 20], + values: [10, 14], }); // Audio player snapshot last (so that buffering is included) diff --git a/src/audio-player-composable/__tests__/utils.test.tsx b/src/audio-player-composable/__tests__/utils.test.tsx index 5490392bfe..3a940302b2 100644 --- a/src/audio-player-composable/__tests__/utils.test.tsx +++ b/src/audio-player-composable/__tests__/utils.test.tsx @@ -57,7 +57,7 @@ describe('formatTrackData', () => { }); }); - test('when multiple buffered sections exist', () => { + test('when multiple buffered sections take the nearest to the curser time (start time is closest)', () => { // This can occur when a user moves ahead then back again, multiple disparate buffered sections can exist. // Example here is buffered sections exist between 0-125 and 216-228. The current play position is at 32. // It has been diecided to only show the first buffer section similar to how youtube does it. @@ -68,21 +68,21 @@ describe('formatTrackData', () => { end: (i: number) => [125, 228][i], }), ).toEqual({ - colors: ['indicator', 'buffer', 'track', 'track', 'track'], - values: [32, 125, 216, 228], + colors: ['indicator', 'buffer', 'track'], + values: [32, 125], }); }); - test('Ensure start is not first value in buffer array', () => { + test('when multiple buffered sections take the nearest to the curser time (end time is closest', () => { expect( - formatTrackData('track', 'indicator', 'buffer', [50], { - length: 3, - start: (i: number) => [0, 100, 150][i], - end: (i: number) => [49, 149, 199][i], + formatTrackData('track', 'indicator', 'buffer', [122], { + length: 2, + start: (i: number) => [0, 216][i], + end: (i: number) => [125, 228][i], }), ).toEqual({ - colors: ['indicator', 'buffer', 'track', 'track', 'track'], - values: [50, 149, 150, 199], + colors: ['indicator', 'buffer', 'track'], + values: [122, 125], }); }); diff --git a/src/audio-player-composable/components/seek-bar/utils.ts b/src/audio-player-composable/components/seek-bar/utils.ts index fc66e376b6..28451b7159 100644 --- a/src/audio-player-composable/components/seek-bar/utils.ts +++ b/src/audio-player-composable/components/seek-bar/utils.ts @@ -10,31 +10,48 @@ export const formatTrackData = ( } const time = timeArr[0]; - let bufferPositions = []; - let bufferObjectArray = []; + const bufferPositions = []; + const closestBuffer = []; const {length} = buffered; for (let i = 0; i < length; i += 1) { - bufferObjectArray.push({type: 'start', value: buffered.start(i)}); - bufferObjectArray.push({type: 'end', value: buffered.end(i)}); + // get all buffer segments + bufferPositions.push({type: 'start', value: buffered.start(i)}); + bufferPositions.push({type: 'end', value: buffered.end(i)}); } - bufferObjectArray = bufferObjectArray.filter(val => val.value > time); - if (bufferObjectArray[0] && bufferObjectArray[0].type === 'start') { - bufferObjectArray.shift(); - } + if (bufferPositions.length) { + // get closest buffer segment to curser + const closest = bufferPositions.reduce((prev, curr) => + Math.abs(curr.value - time) < Math.abs(prev.value - time) ? curr : prev, + ); + // get index of closest buffer in array + const pos = bufferPositions.map(a => a.value).indexOf(closest.value); + + let value; + if (closest.type === 'start') { + // if closest buffer is type start set the next end as value + value = bufferPositions[pos + 1].value; + } - bufferPositions = bufferObjectArray.map(val => val.value); + if (closest.type === 'end' && closest.value > time) { + // if closest buffer is type end and greater then current time set as value + value = bufferPositions[pos].value; + } + + if (value) { + // set value for buffer + closestBuffer.push(value); + } + } const colors = [ indicatorColor, - ...bufferPositions.map((x, i) => { - if (i === 0) return bufferColor; - return trackColor; - }), + ...closestBuffer.map(() => bufferColor), trackColor, ]; - const values = [time, ...bufferPositions]; + + const values = [time, ...closestBuffer]; return {colors, values}; }; From 82e60e1641583391999a4190698ecb2badbd8497 Mon Sep 17 00:00:00 2001 From: timbradbury Date: Tue, 24 May 2022 09:10:27 +0100 Subject: [PATCH 3/5] fix(PPDSC-2047): add type to buffer array --- src/audio-player-composable/components/seek-bar/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/audio-player-composable/components/seek-bar/utils.ts b/src/audio-player-composable/components/seek-bar/utils.ts index 28451b7159..cfca8df640 100644 --- a/src/audio-player-composable/components/seek-bar/utils.ts +++ b/src/audio-player-composable/components/seek-bar/utils.ts @@ -10,7 +10,7 @@ export const formatTrackData = ( } const time = timeArr[0]; - const bufferPositions = []; + const bufferPositions: {type: 'start' | 'end'; value: number}[] = []; const closestBuffer = []; const {length} = buffered; From 53e7a7f2d1128c3a6e863e3b76209fb719f8aa9e Mon Sep 17 00:00:00 2001 From: timbradbury Date: Tue, 24 May 2022 14:48:08 +0100 Subject: [PATCH 4/5] fix(PPDSC-2047): refactor closestBuffer --- src/audio-player-composable/components/seek-bar/utils.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/audio-player-composable/components/seek-bar/utils.ts b/src/audio-player-composable/components/seek-bar/utils.ts index cfca8df640..e750625a75 100644 --- a/src/audio-player-composable/components/seek-bar/utils.ts +++ b/src/audio-player-composable/components/seek-bar/utils.ts @@ -11,7 +11,7 @@ export const formatTrackData = ( const time = timeArr[0]; const bufferPositions: {type: 'start' | 'end'; value: number}[] = []; - const closestBuffer = []; + let closestBuffer: number = 0; const {length} = buffered; for (let i = 0; i < length; i += 1) { @@ -41,17 +41,17 @@ export const formatTrackData = ( if (value) { // set value for buffer - closestBuffer.push(value); + closestBuffer = value; } } const colors = [ indicatorColor, - ...closestBuffer.map(() => bufferColor), + ...(closestBuffer ? [closestBuffer] : []).map(() => bufferColor), trackColor, ]; - const values = [time, ...closestBuffer]; + const values = closestBuffer ? [time, closestBuffer] : [time]; return {colors, values}; }; From d22d664d9320696070b51aef72b4affa467bf1e2 Mon Sep 17 00:00:00 2001 From: timbradbury Date: Tue, 24 May 2022 16:03:54 +0100 Subject: [PATCH 5/5] fix(PPDSC-2047): fix typo --- src/audio-player-composable/__tests__/utils.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/audio-player-composable/__tests__/utils.test.tsx b/src/audio-player-composable/__tests__/utils.test.tsx index 3a940302b2..13122135f9 100644 --- a/src/audio-player-composable/__tests__/utils.test.tsx +++ b/src/audio-player-composable/__tests__/utils.test.tsx @@ -60,7 +60,7 @@ describe('formatTrackData', () => { test('when multiple buffered sections take the nearest to the curser time (start time is closest)', () => { // This can occur when a user moves ahead then back again, multiple disparate buffered sections can exist. // Example here is buffered sections exist between 0-125 and 216-228. The current play position is at 32. - // It has been diecided to only show the first buffer section similar to how youtube does it. + // It has been decided to only show the first buffer section similar to how youtube does it. expect( formatTrackData('track', 'indicator', 'buffer', [32], { length: 2,