Refactor audio #1668
Draft
Refactor audio #1668
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 8 commits
April 7, 2024 15:08
- set the correct paused tests - Should move loadmetadata and timeupdate tests to a more concise API section - Should handle the click and _rewind function
also removed similar test from paused
YonatanKra
commented
Apr 8, 2024
Comment on lines
+12
to
+21
| let audioElement: any; | ||
| class MockAudio extends Audio { | ||
| constructor() { | ||
| super(); | ||
| // eslint-disable-next-line @typescript-eslint/no-this-alias | ||
| audioElement = this; | ||
| } | ||
| } | ||
|
|
||
| window.Audio = MockAudio; |
YonatanKra
commented
Apr 8, 2024
| @@ -28,15 +39,15 @@ describe('vwc-audio-player', () => { | |||
|
|
|||
| beforeEach(async () => { | |||
| element = (await fixture( | |||
| `<${COMPONENT_TAG} timestamp src="https://download.samplelib.com/mp3/sample-6s.mp3"></${COMPONENT_TAG}>` | |||
| `<${COMPONENT_TAG} timestamp src="./sample-6s.mp3"></${COMPONENT_TAG}>` | |||
There was a problem hiding this comment.
Remove network dependent source
YonatanKra
commented
Apr 8, 2024
Comment on lines
58
to
90
| describe('notime', function () { | ||
| it('should remove the time stamp when equal to true', async function () { | ||
| it('should show timestamp when false', async () => { | ||
| element.notime = false; | ||
| await elementUpdated(element); | ||
|
|
||
| const controls = getBaseElement(element).querySelector('.controls') as HTMLDivElement; | ||
| const currentTimeClassExistsBeforeTheChange = controls.querySelector('.current-time'); | ||
| const totalTimeClassExistsBeforeTheChange = controls.querySelector('.total-time'); | ||
| const currentTimeClassExists = controls.querySelector('.current-time'); | ||
| const totalTimeClassExists = controls.querySelector('.total-time'); | ||
|
|
||
| expect(currentTimeClassExists).toBeTruthy(); | ||
| expect(totalTimeClassExists).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should remove the time stamp when equal to true', async function () { | ||
| element.notime = true; | ||
| await elementUpdated(element); | ||
|
|
||
| const currentTimeClassExistsAfterTheChange = controls.querySelector('.current-time'); | ||
| const totalTimeClassExistsAfterTheChange = controls.querySelector('.total-time'); | ||
| const controls = getBaseElement(element).querySelector('.controls') as HTMLDivElement; | ||
| const currentTimeClassExists = controls.querySelector('.current-time'); | ||
| const totalTimeClassExists = controls.querySelector('.total-time'); | ||
|
|
||
| expect(currentTimeClassExistsBeforeTheChange).toBeTruthy(); | ||
| expect(totalTimeClassExistsBeforeTheChange).toBeTruthy(); | ||
| expect(currentTimeClassExists).toBeFalsy(); | ||
| expect(totalTimeClassExists).toBeFalsy(); | ||
| }); | ||
|
|
||
| expect(currentTimeClassExistsAfterTheChange).toBeFalsy(); | ||
| expect(totalTimeClassExistsAfterTheChange).toBeFalsy(); | ||
| it('should update the duration when notime is set to true', async function () { | ||
| const newElement = (await fixture( | ||
| `<${COMPONENT_TAG} notime src="./sample-6s.mp3"></${COMPONENT_TAG}>`)) as AudioPlayer; | ||
| setAudioDuration(60); | ||
| await elementUpdated(newElement); | ||
| expect(newElement.duration).toBe(60); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
More comprehensive tests for notime
What was done? 1. Simpler and more correct slider change tracking 2. Removal of "_togglePlay" 3. Paused state is totally managed by `paused` 4. Slider element is now private 5. Timestamp element is now private What's left? 1. Make duration private 2. Move _formatTime to be a utility function 3. Extract native audio player creation to its own private method 4. handleSlideMouseUp biz logic should be extracted so it can be used with keyboard too 5. change the notime API?
YonatanKra
force-pushed
the
refactor-audio
branch
from
b972bdd
to
928a457
Compare
YonatanKra
commented
Apr 8, 2024
| @@ -97,128 +122,217 @@ describe('vwc-audio-player', () => { | |||
| }); | |||
|
|
|||
| describe('disabled', () => { | |||
There was a problem hiding this comment.
More comprehensive tests
YonatanKra
commented
Apr 8, 2024
|
|
||
| pauseButton.click(); | ||
| describe('paused', function () { |
There was a problem hiding this comment.
Set pause as the only way to change the state of the audio player in regards to play/pause - both visually and auditory
added 4 commits
April 9, 2024 11:17
TODO::handle space bar to play
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.