Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Persist playbackRate and volume property #237
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.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.