Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Persist playbackRate and volume property #237

merged 17 commits into from Jan 24, 2019


None yet
2 participants
Copy link

commented Nov 15, 2018

Reference: Issue #234 馃槃

The playbackRate and Volume setting are now both placed in LocalStorage. That logic lives in Player.js.

I also made a few additional changes. Previously, Player.js had 10 hardcoded input + label tags that represented the volume bars. I refactored this, by creating a new component called VolumeBars.js. Now Player.js displays the volume bars ( <VolumeBars volume={this.volume} /> ) via the VolumeBars.js imported component.

VolumeBars.js now generates these same 10 input/label blocks with the same unique attribute settings they each had before. The benefit is I generated these 10 blocks by just mapping over one as a template in the VolumeBars.js component. Now this better follows the DRY (don't repeat yourself) principal and removes a lot of repeated code from Player.js, so its cleaner.

VolumeBars.js also tracks, via LocalStorage, which volume bars the user has clicked (the object key is named "checked"). If this is not done, then when the users volume setting is restored on refresh the volume setting number in LocalStorage will be restored correctly, but the volume bar CSS will incorrectly show all volume bars "green". By now tracking which volume bars the user "checked", LocalStorage will restore the correct CSS for the volume bars to match the other volume setting number in LocalStorage. Now on refresh, the CSS for the volume bars correctly represent the Volume Setting Number.


This comment has been minimized.

Copy link
Contributor Author

commented Jan 3, 2019

Any updates ?

@wesbos wesbos merged commit 796f021 into wesbos:master Jan 24, 2019


This comment has been minimized.

Copy link

commented Jan 24, 2019

sorry for the delay! Thanks a ton :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.